Codectionary / Developer documentation / CSS

Attribute Selectors

Attribute selectors target elements based on the presence or value of an HTML attribute, using square bracket syntax. They support several matching modes beyond exact equality, including starts-with, ends-with, and contains, making them powerful for targeting elements without needing extra classes.

Syntax

[attr] { }
[attr="value"] { }
[attr^="value"] { }

Examples

Presence and Exact Match

Selecting by whether an attribute exists, or matches exactly.

[disabled] { opacity: 0.5; }              /* any element with a disabled attribute at all */
[type="submit"] { font-weight: bold; }     /* inputs with type exactly "submit" */
[target="_blank"] { }                      /* links that open in a new tab */
  1. The elements contain the exact attributes or attribute-value patterns used by the selectors.
  2. Presence, exact matching and prefix/suffix matching test different conditions.
  3. Empty rules in the original pattern example need a declaration before they create a visible effect; the updated example supplies one.
HTML used by this example
<p><button disabled>Disabled action</button> <input type="submit" value="Submit example"></p><p><a href="https://example.com" target="_blank" rel="noreferrer">External example</a></p><p><a href="guide.pdf">PDF example link (no file supplied)</a></p><button class="btn-save">Class contains btn-</button>

Pattern-Matching Attribute Values

Starts-with, ends-with, and contains matching.

a[href^="https://"] { color: #166534; font-weight: bold; }
a[href$=".pdf"] { border-bottom: 3px dashed #b45309; }
[class*="btn-"] { padding: .75rem; background: #fef3c7; color: #422006; }
  1. The elements contain the exact attributes or attribute-value patterns used by the selectors.
  2. Presence, exact matching and prefix/suffix matching test different conditions.
  3. Empty rules in the original pattern example need a declaration before they create a visible effect; the updated example supplies one.
HTML used by this example
<p><button disabled>Disabled action</button> <input type="submit" value="Submit example"></p><p><a href="https://example.com" target="_blank" rel="noreferrer">External example</a></p><p><a href="guide.pdf">PDF example link (no file supplied)</a></p><button class="btn-save">Class contains btn-</button>

Parameters and values

  • [attr] (presence): Matches if the attribute exists, regardless of value
  • [attr="val"] (exact match): Matches only an exact value
  • [attr^="val"] (starts with): Matches values beginning with the given string
  • [attr$="val"] (ends with): Matches values ending with the given string
  • [attr*="val"] (contains): Matches values containing the given string anywhere

Best practices

  • Use [href$=".pdf"] style selectors to automatically style download links or external links without needing to add classes manually
  • Use [disabled] or [aria-expanded="true"] to style based on state attributes, keeping styling in sync with actual element state
  • Attribute selectors carry the same specificity as a class selector, so they combine predictably with other class-based rules
  • Prefer classes for styling hooks that are purely presentational, and reserve attribute selectors for cases tied to genuine HTML semantics or state

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading