CSS [attribute|=value] Selector

What You’ll Learn

The [attribute|=value] selector matches elements when an attribute value is exactly equal to a string, or when it starts with that string followed by a hyphen. It is ideal for language codes like en-US and en-GB.

Introduction

The [attribute|=value] selector in CSS targets elements whose attribute value is either exactly equal to a given string, or begins with that string followed immediately by a hyphen (-).

This pattern is especially useful for BCP 47 language tags such as lang="en", lang="en-US", and lang="en-GB" — all matchable with a single [lang|=en] rule.

Definition and Usage

Write the attribute in brackets, then |= and the base value: [lang|=en]. It matches lang="en" and lang="en-US", but not lang="english" or lang="fr".

📝 Syntax

The signature of the hyphen-separated attribute selector is:

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

Basic Example

[lang|="en"] {
  color: #1d4ed8;
  font-weight: 600;
}

[lang|="fr"] {
  color: #7c3aed;
  font-style: italic;
}

Syntax Rules

• |= matches the exact value or value- followed by more text.
• The separator after the base value must be a hyphen (-), not an underscore or space.
• The match is case-sensitive.
• Combine with element names: p[lang|="en"].
• Designed for hyphenated value lists like language and locale codes.

Compare Attribute Operators

When to Use [attribute|=value]

• Language tags — Style all English variants with [lang|="en"].
• Alternate links — Target hreflang values like en-US and en-GB.
• Locale prefixes — Match base locale codes before regional suffixes.
• Theme tokens — Match data-theme="dark" and data-theme="dark-high-contrast".
• Hyphenated enums — Any attribute where values follow a base-suffix pattern.

Examples Gallery

Practice hyphen-separated matching with language tags, alternate links, themes, and operator comparisons.

[lang|="en"] {
  color: #1d4ed8;
  font-weight: 600;
  border-left: 3px solid #2563eb;
  padding-left: 0.65rem;
}

a[hreflang|="en"] {
  color: #1d4ed8;
  font-weight: 600;
}

a[hreflang|="fr"] {
  color: #7c3aed;
  font-weight: 600;
}

[data-theme|="dark"] {
  background: #1e293b;
  color: #f8fafc;
  padding: 1rem;
  border-radius: 8px;
}

[data-theme|="light"] {
  background: #f8fafc;
  color: #0f172a;
  padding: 1rem;
  border-radius: 8px;
}

/* Matches en, en-US, en-GB — not "english" */
[lang|="en"] {
  outline: 2px solid #2563eb;
}

/* Would also match lang="english" */
[lang^="en"] {
  background: #fef9c3;
}

⚠️ Common Pitfalls

• Underscores — lang="en_US" does not match [lang|="en"]; the separator must be a hyphen.
• Wrong prefix — lang="eng" does not match [lang|="en"] because it is not en or en-….
• Case sensitivity — lang="EN-us" and lang="en-US" are different.
• Confusing with ^= — Use ^= only when any prefix match is intended, not for structured locale codes.

♿ Accessibility

• Correct lang — Always set valid lang attributes in HTML; CSS styling is supplementary.
• Screen readers — Language detection relies on HTML semantics, not CSS selectors.
• Color alone — Do not use color as the only way to distinguish languages; labels should remain readable.

💡 Best Practices