A catalog of CSS Attribute / Value Selectors
CSS Attribute Value Selectors help you laser in on specific elements for styling based on their attribute values.
[…] → Attribute exists
/* matches elements with a foo attribute of any (or no) value */
[foo] {
...
}
Attribute foo
exists — it may be a value-less boolean (like “autoplay”), or have any value.
= → Attribute value matches exactly
/* matches elements with a data-dongle attribute of "rubidium" */
[data-dongle="rubidium"] {
...
}
^= → Attribute value begins with …
/* matches SVG images with a viewBox value beginning with "0 " */
svg[viewBox^="0 "] {
...
}
Nerds who know Perl, ruby, PHP, or grep/unix will recoginze the $
character that denotes an end of string / end of line.
$= → Attribute value ends with …
/* matches elements with an href whose value ends in .pdf */
[href$=".pdf"] {
...
}
Nerds who know Perl, ruby, PHP, or grep/unix will recoginze the $
character that denotes an end of string / end of line.
~= → Attribute value contains word …
/* matches elements with a class list containing the WORD "discipline" */
[data-program~="discipline"] {
...
}
The one will match elements with the attribute attr only if val
is one of a space-separated list of words contained in attr’s value. Note that even adjoining sentence style punctuation like commas will invalidate this, e.g. an element <div data-program="harsh discipline, no reprieve">
would not match the above selector.
*= → Attribute value contains substring …
/* matches elements with a fill @attr containing the string "flood" ANYWHERE */
[fill*="flood"] {
...
}
This matches elements with the attribute value containing the requested substring, whether it be at the beginning, middle, end, the entire string, etc.