CSS [attribute~=value] Selector

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS space-separated attribute selector matching whole class tokens
Definition

Definition and Usage

The [attr~=value] selector matches when value appears as a whole word in a space-separated attribute list.

Example: [class~="lead"] matches class="intro lead", but not class="leadership" or class="lead-text". Compare with *= (substring) and = (entire value).

Standard-track.

Part of CSS attribute selectors (Selectors Level 3/4). Baseline widely available. Not deprecated or experimental.

Prefer class selectors for class tip

For styling classes, .lead is clearer than [class~="lead"]. Use ~= for attributes like rel, or when you need token matching on custom lists.

Syntax

CSS Syntax

syntax.css
[attr~= value] { … }

value must be a single token (no spaces). Optional flags: i / s before ].

Parts

Selector Parts

PartMeaningTry it
attrAttribute with space-separated tokens (class, rel, …)Try it
~=Whole-word match in the listTry it
valueOne token, e.g. lead or noopenerTry it
vs *=Substring match anywhere (no word boundary)Try it
Approach

How to Use ~=

Match one complete token inside a space-separated attribute.

  1. Confirm the attribute stores tokens separated by spaces.
  2. Write [attr~="token"] with the full word (no spaces in the value).
  3. Apply styles to those matches.
  4. For class, prefer .token in real projects; keep ~= for rel and similar lists.
GoalTypical selector
Has class token lead[class~="lead"] or .lead
Safe external linksa[rel~="noopener"]
Exact class string only[class="lead"] (misses intro lead)
Letters anywhere[class*="lead"] (also matches leadership)
Try it

Live Preview

Pick a class token. Matching elements highlight with real [class~=…] rules.

Token

Only whole tokens match. Substrings inside longer words stay unhighlighted.

Result

intro

intro lead

lead

intro highlight

featured card

leadership (substring lookalike)

Matching [class~="lead"]

Code

CSS Examples

Each snippet focuses on ~=. Use Try It Yourself for a live editor.

Example 1 — Match a Class Token

Style any element that includes the whole word lead in class.

CSS
<style>
  [class~="lead"] {
    color: #1d4ed8;
    font-weight: 600;
  }
</style>

<p class="intro">Welcome</p>
<p class="intro lead">Lead intro</p>
<p class="lead">Lead only</p>
Try It Yourself

How It Works

  1. Read the list. class holds space-separated tokens.
  2. Require a whole word. ~="lead" matches the token lead.
  3. Style matches. Both lines that include lead turn blue.
  4. Skip others. intro alone has no lead token.

Example 2 — Match a rel Token

Highlight links that include noopener among other rel values.

CSS
<style>
  a[rel~="noopener"] {
    color: #15803d;
    font-weight: 600;
  }
</style>

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Safe link</a>
<a href="https://example.com" target="_blank">Plain link</a>
Try It Yourself

How It Works

  1. Use rel. It often lists several tokens separated by spaces.
  2. Match one token. ~="noopener" finds that word in the list.
  3. Style the safe link. Only the first anchor is emphasized.
  4. Ignore missing tokens. Links without noopener stay default.

Example 3 — Why ~= Beats *= for Tokens

Show that substring matching also hits lookalike words.

CSS
<style>
  [class~="lead"] {
    color: #1d4ed8;
  }

  [class*="lead"] {
    text-decoration: underline;
  }
</style>

<p class="intro lead">intro lead</p>
<p class="leadership">leadership</p>
Try It Yourself

How It Works

  1. ~= needs a whole token. Only intro lead gets the blue color.
  2. *= is a substring. Both lines can be underlined.
  3. Pick the safer tool. For class-like lists, prefer ~= (or a class selector).
  4. Remember exact. = would match only class="lead", not intro lead.

Edge Cases & Pitfalls

If a token rule seems to miss, check these first.

partial

No substring matches

[class~="btn"] misses btn-large and button. Those need *= or a different token.

spaces

Value cannot contain spaces

[class~="intro lead"] is invalid for this operator. Match one token at a time, or chain selectors.

exact

Exact full string is different

[class="lead"] fails on class="intro lead". Use ~= for multi-class lists.

hyphen

Not for hyphenated codes

Language tags like en-US belong with |=, not ~=.

class

Class selectors are clearer

In production CSS, write .lead instead of [class~="lead"] unless you have a reason not to.

Compatibility

Browser Support

[attr~=value] is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.

✓ Baseline · Widely available

[attr~=value]

Supported in Chrome 4+, Firefox 2+, Safari 3.1+, Edge 12+, Opera 10+, IE 7+. The i case flag needs Chrome 49+, Firefox 47+, Safari 9+, Edge 79+.

98% Global support
Google Chrome 4+
Full support
Mozilla Firefox 2+
Full support
Apple Safari 3.1+
Full support
Microsoft Edge 12+
Full support
Opera 10+
Full support
Samsung Internet 4+
Full support
Internet Explorer 7+
Full support
~= Universally supported

Bottom line: Safe for production. Prefer class selectors for class tokens; use ~= for rel and similar lists.

Remember

Key Takeaways

  • Role: match one whole word in a space-separated attribute list.
  • Common use: a[rel~="noopener"] or teaching token matching on class.
  • vs *=: ~= needs word boundaries; *= matches letters anywhere.
  • Pitfall: the ~= value itself cannot contain spaces.

One line: use [attr~="token"] when you need a whole word inside a space-separated list.

Frequently Asked Questions

It matches elements whose attribute contains the given value as a whole word in a space-separated list. The token must match completely — not as a partial substring.
[class~=btn] matches class="btn primary" but not class="btn-large". [class*="btn"] matches any value that contains the letters btn anywhere.
= requires the entire attribute value to equal the string. ~= requires one whole word inside a space-separated list.
Prefer .lead for classes — it is shorter and clearer. Use ~= for other space-separated attributes such as rel, or when teaching how token matching works.
No. The value in ~= must be a single token with no whitespace.
Widely available: Chrome 4+, Firefox 2+, Safari 3.1+, Edge 12+, IE 7+. It is a browser CSS selector, not a Node.js API.

Next: [attribute^=value]

Match elements when an attribute value starts with a given prefix.

starts-with selector →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS [attribute|=value] Selector CSS [attribute^=value] Selector