CSS [attribute^=value] Selector

Definition and Usage

The [attr^=value] selector matches elements whose attribute value starts with value (a prefix match).

Classic uses: secure links with a[href^="https"], site paths with a[href^="/"], or in-page anchors with a[href^="#"]. Compare with $= (suffix) and |= (hyphenated codes).

CSS Syntax

Optional flags before ]: i (case-insensitive) or s (force case-sensitive). Quote values with special characters.

Selector Parts

How to Use ^=

Pick the attribute, choose a clear prefix, then style only the matches.

1. Choose the attribute that holds the string (href, src, or data-*).
2. Write [attr^="prefix"] with the exact starting text.
3. Apply styles for those matches.
4. Use |= instead when you need a hyphen boundary (language codes).

Live Preview

Pick a prefix. Matching links highlight with real [href^=…] rules.

CSS Examples

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

<style>
  a[href^="https"] {
    color: #15803d;
    font-weight: 600;
  }
</style>

<a href="https://example.com">Secure</a>
<a href="/about">Internal</a>

<style>
  a[href^="/"] {
    color: #6d28d9;
    font-weight: 600;
  }
</style>

<a href="/about">About</a>
<a href="https://example.com">External</a>

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

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

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

Key Takeaways