CSS Attribute Exact Value Selector

The CSS attribute exact value selector selects elements whose specified attribute value exactly matches a given value. It uses an equals sign (=) between the attribute name and value.

Syntax

The attribute exact value selector uses an equals sign (=) to match an attribute with a specific value:

[attribute="value"] {
  property: value;
}

For example, the following selector matches elements whose data-status attribute has the exact value active:

[data-status="active"] {
  color: #0088cc;
}

How the Attribute Exact Value Selector Works

The selector matches when the entire attribute value corresponds to the specified value. An element with the attribute but a different value does not match.

[data-status="active"] {
  background-color: #d8f1fc;
}

The selector matches the first element below but not the second:

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

Exact Value Matching

The complete attribute value must match the specified value. The selector does not match an attribute merely because the requested text appears somewhere within its value.

[data-category="news"] {
  color: #0088cc;
}

The selector matches data-category="news", but it does not match values such as data-category="local-news" or data-category="news featured".

Other attribute selectors are available when a value needs to be matched as a word, prefix, suffix, or substring.

Case Sensitivity

Whether an attribute value is matched case-sensitively can depend on the document language and the attribute being selected. CSS also provides i and s flags that can explicitly control ASCII case sensitivity for the value comparison.

[data-status="active" i] {
  color: #0088cc;
}
[data-status="active" s] {
  font-weight: 600;
}

The i flag makes the value comparison ASCII case-insensitive, while the s flag makes the comparison case-sensitive.

Combining with Other Selectors

The attribute exact value selector can be combined with a type selector to restrict the match to a particular HTML element.

input[type="email"] {
  border-color: #0088cc;
}

This selector matches <input> elements whose type attribute has the value email.

It can also be combined with classes, IDs, pseudo-classes, and other selectors:

.item[data-status="active"] {
  font-weight: 600;
}
a[target="_blank"]:hover {
  text-decoration: underline;
}

Specificity

An attribute exact value selector contributes 0-1-0 to a selector's specificity, the same as other attribute selectors.

Selector	Specificity
`[data-status="active"]`	`0-1-0`
`input[type="email"]`	`0-1-1`
`.item[data-status="active"]`	`0-2-0`
`#content [data-status="active"]`	`1-1-0`

Attribute Exact Value Selector Example

The following example uses [data-status="active"] to style only the elements whose data-status attribute has the exact value active.

[data-status="active"] {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other attribute selectors provide different ways to match attribute values:

Specifications

The attribute exact value selector is defined in the Selectors Level 4 specification.

CSS Attribute Exact Value Selector