CSS [attribute] Selector

What You’ll Learn

The [attribute] selector targets elements that have a specific HTML attribute, no matter what value it holds. It is a clean way to style links, form fields, and components without extra classes.

Introduction

The CSS [attribute] selector allows you to target elements based on the presence of a specific attribute, regardless of its value.

This is especially useful when you want uniform styles for every element that includes a particular attribute — such as all links with href, or all inputs with placeholder.

Definition and Usage

Wrap an attribute name in square brackets. The selector matches when that attribute exists on the element, even if the value is empty.

You can combine it with element names, classes, and pseudo-classes for more precise rules, such as input[placeholder] or a.external[href].

📝 Syntax

The signature of the presence attribute selector is:

[attribute] {
  /* CSS properties */
}

Basic Example

[href] {
  color: #2563eb;
  text-decoration: underline;
}

Syntax Rules

• Matches any element that has the attribute, regardless of value.
• Attribute names are case-insensitive in HTML for matching purposes.
• Combine with element types: button[type], input[required].
• Does not match elements that lack the attribute entirely.
• Part of a larger attribute selector family (exact, contains, starts-with, etc.).

Attribute Selector Family

When to Use [attribute]

The presence attribute selector is ideal when the attribute itself signals behavior or state:

• Real links — Style <a href> differently from placeholder anchors without href.
• Form hints — Highlight inputs that provide a placeholder.
• Typed buttons — Style button[type] submit/reset controls.
• Disabled controls — Target [disabled] without adding a class.
• Custom data — Style elements with data-* attributes for JS hooks.

Examples Gallery

Practice [attribute] with links, form fields, buttons, and combined selectors.

[href] {
  color: #2563eb;
  text-decoration: underline;
}

[placeholder] {
  border: 2px solid #16a34a;
  padding: 5px;
  border-radius: 6px;
}

button[type] {
  background-color: #facc15;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
}

input[placeholder] {
  border: 2px solid #2563eb;
  padding: 0.5rem;
  border-radius: 6px;
}

⚠️ Common Pitfalls

• Inconsistent attributes — If only some elements include the attribute, others will not receive the style.
• Empty vs missing — href="" still matches [href] because the attribute is present.
• Over-broad rules — Bare [placeholder] affects every element type with that attribute; combine with element names when needed.
• Boolean attributes — disabled and required can appear without a value; [disabled] still matches.

♿ Accessibility

• Do not rely on styling alone — Use semantic HTML and ARIA when attributes convey state.
• Placeholder is not a label — Always pair inputs with visible <label> elements.
• Disabled state — Style [disabled] for visuals, but keep the attribute in HTML for assistive tech.
• Link distinction — Styling [href] helps users spot real links vs inactive anchors.

💡 Best Practices