CSS [attribute=value] Selector

Definition and Usage

The [attr=value] selector matches elements whose attribute value is exactly value—the whole string must match.

Common uses: button[type="submit"], input[type="email"], and a[target="_blank"]. For substrings use *=; for suffixes use $=.

CSS Syntax

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

Selector Parts

How to Use =

Match the full attribute value, then style only those elements.

1. Choose the attribute that holds a discrete value (type, target, role).
2. Write [attr="exact-value"] with the full string.
3. Apply styles to those matches only.
4. Use i when casing may vary; use ~= when you need one word in a list.

Live Preview

Pick an exact value. Matching controls highlight with real [attr=value] rules.

CSS Examples

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

<style>
  a[target="_blank"] {
    color: #b91c1c;
    font-weight: 600;
    text-decoration: underline;
  }
</style>

<a href="https://example.com" target="_blank">New tab</a>
<a href="/about">Same tab</a>

<style>
  button[type="submit"] {
    color: #fff;
    background: #15803d;
    border: 1px solid #15803d;
    padding: 0.4em 1em;
  }
</style>

<button type="submit">Submit</button>
<button type="button">Cancel</button>

<style>
  input[type="email"] {
    border: 2px solid #1d4ed8;
    padding: 0.35em 0.5em;
  }
</style>

<input type="email" value="[email protected]">
<input type="text" value="plain text">

Key Takeaways