The [attribute] selector targets any element that contains a specific HTML attribute, regardless of the attribute’s value. It is one of the most flexible CSS selectors because it allows you to style elements based purely on the presence of an attribute, rather than element type, class, or ID. This makes it especially useful when working with semantic HTML, form elements, accessibility attributes, or dynamically generated markup where classes may not always be predictable.

The [attribute] selector is commonly used to apply visual cues or behavioral styling to elements that share a functional purpose. For example, you can style all elements that include a title, disabled, or data-* attribute without needing to add extra classes. This is particularly helpful when enhancing accessibility or improving user experience through subtle visual hints, such as changing the cursor or adding outlines. Because this selector does not depend on the attribute’s value, it works well when the mere existence of the attribute is what matters.

This selector is also frequently combined with other selectors to narrow its scope. For instance, you can apply styles only to inputs that include a specific attribute, or only to links that contain a certain attribute. It works seamlessly alongside selectors like [attribute="value"] or structural selectors such as >, allowing for highly expressive and readable CSS rules without excessive markup.

Example: Styling elements with a specific attribute

<button disabled>Submit</button>
<button>Cancel</button>

[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

In this example, only the button containing the disabled attribute is affected. This approach avoids extra classes and keeps the HTML clean and meaningful.

Example: Targeting custom data attributes

<div data-status="active">Active item</div>
<div>Normal item</div>

[data-status] {
  border: 2px solid green;
}

This is especially useful when working with JavaScript-driven interfaces where data-* attributes store state or configuration.

The [attribute] selector works well alongside CSS properties such as opacity, cursor, and border to visually communicate meaning or interactivity. It also pairs naturally with semantic HTML elements like button or input, making your styles both expressive and maintainable.