Attribute selector
The attribute selector matches elements based on the presence or value of an attribute.
Syntax
[attr], [attr=value], [attr^=v], [attr*=v], [attr$=v]Examples
input[type='email'] { border-color: teal; }
a[href^='https://'] { color: green; }
[data-state='open'] { display: block; }
[aria-current='page'] { font-weight: 700; }
Output
Styles email inputs, external https links, open-state elements, and the current page nav link.
Notes
Operators: = exact, ^= starts-with, $= ends-with, *= contains, ~= space-list, |= prefix. Add i before ] for case-insensitive matching. Specificity equals a class (0,1,0).
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 1.0 |
| firefox | 1.0 |
| safari | 3.1 |
| edge | 12 |