CSS [attr*="..."] Substring Attribute Selector

The *= Operator

[attr*="value"] matches when the substring appears anywhere inside the attribute value. It's the most permissive of the three substring operators (^=, $=, *=).

Targeting Anywhere in URLs

a[href*="?utm_"]::after {
  content: " (tracking)";
  color: #888;
}

a[href*="/admin/"] {
  border: 1px dashed orange;
}

These rules work no matter where the substring lives — mid-path, mid-query, or near the end.

Multi-Class Targeting Without Order Sensitivity

[class^="btn-"] only fires if btn- is the first class. To match it anywhere in the class list, use:

[class*=" btn-"], [class^="btn-"] {
  /* Catches all positions including first */
}

The leading space in " btn-" prevents matching abtn- mid-word.

Embedded Identifier Searching

If your IDs follow a pattern like field-username-input, *= lets you target by middle segment:

[id*="-username-"] {
  font-family: monospace;
}

Searching Data Attributes

Substring matching is excellent for tagging schemes:

[data-tags*="featured"] { box-shadow: 0 0 0 2px gold; }
[data-tags*="archived"] { opacity: 0.4; }

Word-List vs Substring

[data-tags~="featured"] requires featured to be a whole space-separated token. [data-tags*="featured"] would also match featured-2024. Pick the operator that matches your data model.

Specificity

(0, 1, 0) — same as a class.

Performance Note

Substring matchers are slightly slower to evaluate than exact-match selectors because the engine cannot use a hash lookup, but the cost is negligible for typical pages with hundreds of nodes. Only worry on very large DOMs (10k+ elements).