An attribute selector targets an element based on an HTML attribute it carries, rather than its tag, class, or id — useful for styling form inputs by type, or links by their destination.
Matches any element that has the attribute at all, regardless of its value.
input[required] {
border-color: orange;
}input[type="email"] {
background-image: url(email-icon.svg);
}a[href^="https://"] {
/* every link that starts with https:// */
}a[href$=".pdf"] {
/* every link ending in .pdf — good for a download icon */
}a[href*="example.com"] {
/* every link containing example.com anywhere in the URL */
}[class~="featured"] {
/* matches class="card featured" but not class="unfeatured" */
}| Selector | Matches |
|---|---|
| [attr] | The attribute exists, any value |
| [attr=value] | The attribute equals value exactly |
| [attr^=value] | The attribute starts with value |
| [attr$=value] | The attribute ends with value |
| [attr*=value] | The attribute contains value anywhere |
| [attr~=value] | value appears as one whole word in a space-separated list |
A practical combination
A very common real use: a[href^="https://"]:not([href*="yoursite.com"]) selects external links only — a good base for automatically adding an "opens in new tab" icon.