CSS Attribute Substring Selector

The CSS attribute substring selector selects elements whose specified attribute value contains a particular sequence of characters. It uses the asterisk-equals operator (*=) between the attribute name and value.

Syntax

The attribute substring selector uses the asterisk-equals operator (*=) to match an attribute value containing the specified text:

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

For example, the following selector matches elements whose data-category attribute contains the text news:

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

How the Attribute Substring Selector Works

The *= operator searches for the specified sequence of characters anywhere within the attribute value. Characters can appear before or after the matching text.

[data-category*="news"] {
  background-color: #d8f1fc;
}

The selector matches each of the following elements because their data-category values contain the sequence news:

<p data-category="news">News</p>
<p data-category="local-news">Local news</p>
<p data-category="newsletter">Newsletter</p>

Substring Matching

The specified text does not need to be a complete word and can occur anywhere within the attribute value.

[data-file*="report"] {
  color: #0088cc;
}

This selector matches values such as report, annual-report.pdf, reports/summary.html, and myreport. It does not match an attribute value that does not contain the character sequence report.

This differs from the word selector (~=), which requires a complete whitespace-separated word, and the begins with (^=) and ends with ($=) selectors, which restrict where the matching text occurs.

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

a[href*="example.com"] {
  color: #0088cc;
}

This selector matches <a> elements whose href attribute contains example.com anywhere in its value.

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

.item[data-category*="news"] {
  font-weight: 600;
}
a[href*="example.com"]:hover {
  text-decoration: underline;
}

Specificity

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

Selector	Specificity
`[data-category*="news"]`	`0-1-0`
`a[href*="example.com"]`	`0-1-1`
`.item[data-category*="news"]`	`0-2-0`
`#content [data-category*="news"]`	`1-1-0`

Attribute Substring Selector Example

The following example uses [data-category*="news"] to select elements whose data-category value contains the sequence news anywhere in the value. The final value does not contain news and is not selected.

[data-category*="news"] {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other attribute selectors provide different ways to match attribute values:

Specifications

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

CSS Attribute Substring Selector