The [attribute=value] selector targets elements that have a specific attribute with an exact value, making it one of the most precise attribute selectors in CSS. It allows you to style elements only when a given attribute matches the value exactly - not partially, not conditionally, but strictly equal. This makes it ideal for targeting elements based on semantic meaning, state, configuration, or metadata defined directly in the HTML.

This selector is commonly used with attributes such as type, name, role, data-*, aria-*, and others. For example, selecting all inputs where type="text" allows you to style text fields without affecting checkboxes or buttons. Because the match must be exact, type="text" will not match type="textbox" or type="text-field". This precision helps avoid unintended styling and keeps your CSS predictable and maintainable.

The [attribute=value] selector is especially powerful when combined with other selectors. For instance, it’s often paired with element selectors (like targeting only <code><a href="/html-tags/tag-input.php">input</a></code> elements with a certain value) or grouped with class-based logic. It also works well alongside more flexible attribute selectors such as [attribute*=value], which matches partial values, or [attribute^=value], which matches values that begin with a specific string.

In practical use, this selector is frequently applied to form elements, accessibility attributes, and data attributes. For example, when working with custom components or JavaScript-driven interfaces, you might use data-state="active" or aria-expanded="true" to visually reflect state changes. These can then be styled cleanly using CSS without relying on extra classes or inline styles. When combined with properties like background-color or border, it becomes easy to create visual cues tied directly to semantic meaning.

Example

<button data-status="active">Active</button>
<button data-status="inactive">Inactive</button>

button[data-status="active"] {
  background-color: green;
  color: white;
}

In this example, only the button with data-status="active" receives the styling. This keeps the markup expressive while allowing the CSS to remain clean and intentional.

Overall, the [attribute=value] selector is best used when you need precise control over which elements are styled, especially in structured or dynamic interfaces where attributes communicate meaning beyond simple class names.