Attribute selectors match the presence or value of any attribute, including data-*. Each weighs 0-1-0, like a class.
| Selector | Matches elements whose attribute... |
|---|---|
| [target] / [type="email"] | exists / equals email exactly |
| [title~="car"] / [lang|="en"] | has the word car / is en or en-* |
| [href^="https:"] / [href$=".pdf"] | starts with https: / ends with .pdf |
| [href*="shop"] / [data-state="open" i] | contains shop / is open, any case |
a[href^="https:"]::after { content: " \2197"; } /* external-link arrow */
a[href$=".pdf" i]::before { content: "PDF "; font-weight: 700; } /* also .PDF */
a[href^="mailto:"] { color: #2e7d32; }
[data-state="open" i] { background: #fff3e0; } /* open, OPEN, Open */The i flag (Baseline widely available) ignores ASCII case. Prefer :lang(en) to [lang|="en"], because it also matches descendants that inherit the language.