CSS [attribute|=value] Selector

Definition and Usage

The [attr|=value] selector matches when the attribute value is exactly value, or starts with value followed immediately by a hyphen (-).

Classic use: language tags. [lang|=en] matches en, en-US, and en-GB—but not english. Compare with = (exact only) and ^= (any prefix).

CSS Syntax

Optional flags before ]: i (case-insensitive) or s (force case-sensitive).

Selector Parts

How to Use |=

Use it for hyphenated codes where the primary tag matters.

1. Pick the attribute that stores a language or similar code (lang, hreflang).
2. Write [attr|=primary] with the primary tag (e.g. en).
3. Style all matching locales together.
4. Prefer |= over ^= when you must reject lookalikes like english.

Live Preview

Pick a primary language tag. Matching elements highlight with real [lang|=…] rules.

CSS Examples

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

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

<p lang="en-US">American English</p>
<p lang="en">Base English</p>
<p lang="fr">Français</p>

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

<a href="/en-us/" hreflang="en-US">English (US)</a>
<a href="/fr/" hreflang="fr-FR">Français</a>

<style>
  [lang|="en"] {
    color: #1d4ed8;
  }

  [lang^="en"] {
    text-decoration: underline;
  }
</style>

<p lang="en-US">en-US</p>
<p lang="english">english</p>

Key Takeaways