The [attribute~=value] selector targets elements whose specified attribute contains a space-separated list of words, where one of those words exactly matches the given value. It is most commonly used with attributes like class, rel, or aria-*, where multiple values are stored in a single attribute separated by spaces. This selector is especially useful when you want to match one logical token without affecting other values in the same attribute.

Unlike substring-based selectors, [attribute=value] only matches whole words, not partial text. For example, an element with class="btn primary large" will match `[class=primary], but it will not match [class~=prim]`. This makes it safer and more predictable when working with class-like attributes. It behaves differently from selectors such as [attribute*=value], which match partial text, or [attribute^=value], which match only the beginning of an attribute value.

This selector is commonly used for styling groups of elements that share a semantic label without relying on a single class name. For example, you might use it to style elements that include a certain keyword in their class list, or to target links with a specific rel value. It is also helpful when working with dynamically generated class lists where exact class structures are unpredictable.

Example: matching a class value

<div class="card featured">Featured card</div>
<div class="card">Regular card</div>

[class~="featured"] {
  border: 2px solid gold;
}

Only the first <div> will receive the border because "featured" is a complete word in the class attribute.

Example: working with semantic attributes

<a href="#" rel="nofollow external">External link</a>
<a href="#" rel="internal">Internal link</a>

[rel~="external"] {
  text-decoration: underline;
}

This approach is often clearer and more maintainable than chaining multiple selectors or relying on attribute position. It also pairs well with layout or visual styling using properties such as display or border, especially when grouping related elements visually.

Because [attribute~=value] relies on whitespace-separated values, it does not work for attributes like id or data-* values unless they are intentionally structured with spaces. For those cases, selectors like [attribute=value] or [attribute*=value] are more appropriate.

Overall, the [attribute~=value] selector is ideal when you want precision without rigidity - matching meaningful tokens while remaining flexible in how attributes are composed.