CSS Attribute Selectors - Match Elements by Attributes

CSS Attribute Selectors

Attribute selectors let you target elements based on the presence or value of HTML attributes. They are powerful for styling form elements, links, and elements with data attributes.

Selector Variants

Selector	Matches
[attr]	Elements that have the attribute
[attr="val"]	Attribute equals exactly
[attr^="val"]	Attribute starts with
[attr$="val"]	Attribute ends with
[attr*="val"]	Attribute contains substring
[attr~="val"]	Attribute word list contains
`[attr	="val"]`

Practical Examples

Style external links differently:

a[href^="https://"] {
  padding-right: 16px;
  background: url(external-icon.svg) right center no-repeat;
}

Style file download links by extension:

a[href$=".pdf"] { color: red; }
a[href$=".zip"] { color: green; }
a[href$=".doc"] { color: blue; }

Style inputs by type:

input[type="email"],
input[type="url"] {
  font-family: monospace;
}

Target data attributes:

[data-theme="dark"] {
  background: #1a1a2e;
  color: #eee;
}

Case Sensitivity

By default, attribute value matching is case-sensitive. Add the i flag for case-insensitive matching:

[type="text" i] { /* matches TEXT, Text, text */ }

Specificity

All attribute selectors have the same specificity as a class selector: (0, 1, 0).