CSS Attribute Word Selector

The CSS attribute word selector selects elements whose specified attribute contains a particular word in a whitespace-separated list of words. It uses the tilde-equals operator (~=) between the attribute name and value.

Syntax

The attribute word selector uses the tilde-equals operator (~=) to match a complete word in a whitespace-separated attribute value:

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

For example, the following selector matches elements whose data-tags attribute contains the word featured:

[data-tags~="featured"] {
  color: #0088cc;
}

How the Attribute Word Selector Works

The ~= operator treats the attribute value as a whitespace-separated list of words. The selector matches when one of those complete words is equal to the specified value.

[data-tags~="featured"] {
  background-color: #d8f1fc;
}

The selector matches both of the following elements because featured appears as a complete word:

<p data-tags="featured">Featured item</p>
<p data-tags="news featured popular">Featured news item</p>

Word Matching

The specified value must match a complete whitespace-separated word. It does not match when the text appears only as part of a larger word.

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

This selector matches data-tags="local news featured" because news is a complete word. It does not match data-tags="newsletter" or data-tags="local-news".

This behavior differs from the substring selector (*=), which can match text appearing anywhere within an attribute value.

Case Sensitivity

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

[data-tags~="featured" i] {
  color: #0088cc;
}
[data-tags~="featured" 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 word selector can be combined with a type selector to restrict the match to a particular HTML element.

p[data-tags~="featured"] {
  color: #0088cc;
}

This selector matches <p> elements whose data-tags attribute contains featured as a complete word.

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

.article[data-tags~="featured"] {
  font-weight: 600;
}
a[rel~="help"]:hover {
  text-decoration: underline;
}

Specificity

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

Selector	Specificity
`[data-tags~="featured"]`	`0-1-0`
`p[data-tags~="featured"]`	`0-1-1`
`.article[data-tags~="featured"]`	`0-2-0`
`#content [data-tags~="featured"]`	`1-1-0`

Attribute Word Selector Example

The following example uses [data-tags~="featured"] to select elements containing featured as a complete whitespace-separated word. A value containing featured only as part of another word does not match.

[data-tags~="featured"] {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other attribute selectors provide different ways to match attribute values:

Specifications

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

CSS Attribute Word Selector