CSS Attribute Selector ([attr]) — Selecting by Element Attributes

CSS Attribute Selectors

Attribute selectors target elements based on the presence or value of HTML attributes. They are incredibly versatile and come in seven variations.

All Variations

Selector	Matches
[attr]	Has the attribute (any value)
[attr="value"]	Exact match
[attr~="value"]	Contains word (space-separated list)
`[attr	="value"]`
[attr^="value"]	Starts with value
[attr$="value"]	Ends with value
[attr*="value"]	Contains value anywhere

Examples

/* Any element with a title attribute */
[title] { cursor: help; }

/* Links to external sites */
a[href^="https://"] { }

/* Links to PDF files */
a[href$=".pdf"]::after { content: " (PDF)"; }

/* Data attributes */
[data-theme="dark"] { background: #000; }

/* Case-insensitive matching */
a[href$=".PDF" i] { } /* the 'i' flag */

Specificity

Every attribute selector has a specificity of (0, 1, 0) — the same as a class selector. This makes them interchangeable with classes in specificity calculations.

Case Sensitivity

By default, attribute values are case-sensitive. Add the i flag before the closing bracket for case-insensitive matching:

[type="submit" i] { }

Common Patterns

/* Style required form fields */
input[required] { border-left: 3px solid red; }

/* External links get an icon */
a[target="_blank"]::after { content: " ↗"; }

/* Language-specific styles */
[lang|="en"] { quotes: "“" "”"; }