CSS [attribute~=value] Selector

What You’ll Learn

The [attribute~=value] selector matches elements when a given value appears as a whole word in a space-separated attribute list. It is perfect for targeting specific classes or rel tokens.

Introduction

The [attribute~=value] selector in CSS targets elements whose attribute contains a specific value as one of the space-separated words in that attribute.

This is especially useful for the class attribute, where multiple class names are listed with spaces, and for rel attributes that list link relationship tokens.

Definition and Usage

Write the attribute in brackets, then ~= and the word to find: [class~="lead"]. It matches class="intro lead" because lead is a complete word in the list — but not class="leads".

📝 Syntax

The signature of the space-separated attribute selector is:

[attribute~="value"] {
  /* CSS properties */
}

Basic Example

[class~="lead"] {
  background-color: #dbeafe;
  font-weight: 600;
}

a[rel~="noopener"] {
  color: #16a34a;
}

Syntax Rules

• ~= matches when the value is a complete word separated by spaces.
• The match is case-sensitive.
• Works with any space-separated attribute, not only class.
• Does not match partial words: [class~="le"] does not match class="lead".
• Prefer the class selector .lead for simple class matching when possible.

Compare Attribute Operators

When to Use [attribute~=value]

• Multi-class elements — Target elements that include a specific class token among others.
• rel tokens — Style links with rel="noopener" or rel="noreferrer" in a list.
• Legacy markup — Match class names when you cannot add a dedicated class selector.
• Attribute-driven styling — Any custom attribute that stores space-separated keywords.
• Specificity control — Combine with other selectors when you need attribute-based matching.

Examples Gallery

Practice space-separated matching with class lists, rel attributes, highlight modifiers, and operator comparisons.

[class~="lead"] {
  background-color: #dbeafe;
  font-weight: 600;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
}

[class~="highlight"] {
  background: #fef9c3;
  border-left: 4px solid #eab308;
  padding: 0.5rem 0.65rem;
}

a[rel~="noopener"] {
  color: #16a34a;
  font-weight: 600;
}

a {
  color: #2563eb;
  text-decoration: none;
}

/* Matches class="btn" or class="btn primary" — not "btn-large" */
[class~="btn"] {
  outline: 2px solid #2563eb;
}

/* Also matches class="btn-large" */
[class*="btn"] {
  background: #fef9c3;
}

⚠️ Common Pitfalls

• Partial words — [class~="le"] does not match class="lead"; only complete tokens count.
• Case sensitivity — [class~=Lead] does not match class="lead".
• Wrong separator — Works for space-separated lists only, not commas or hyphens.
• Prefer .class — For simple class targeting, .lead is shorter and equally effective.

♿ Accessibility

• Semantic HTML — Use proper elements and ARIA roles; attribute selectors are for styling, not structure.
• rel attributes — Include noopener for security on target="_blank" links regardless of CSS styling.
• Color alone — Do not rely only on background color from class-based styling to convey meaning.

💡 Best Practices