Attribute Selectors - Live Demo
-
Presence selector:
[attribute]— matches any element that simply has the attribute, regardless of value. Useful for styling disabled buttons, required fields, or anything with a boolean attribute. -
Exact match selector:
[attribute="value"]— matches elements whose attribute value matches exactly. Great for targeting specific input types, file formats, or custom data attributes. -
Substring matchers:
[^="prefix"]— starts with (protocols, external links)[$="suffix"]— ends with (file extensions)[*="content"]— contains (naming patterns, utility classes)
Below are live examples of each selector type in action, styling without using classes or javascript.
Presence & Exact Match
Presence selector: [disabled] matches any element that simply has the
attribute.
Exact match: [type="email"] matches elements whose attribute value matches
exactly.
Substring Matchers
These selectors match parts of attribute values:
^= starts with • $= ends with • *= contains •
starts with::before
Contains Selector (*=)
The [class*="grid"] selector matches any element whose class attribute contains the substring
"grid". This allows styling based on naming patterns.
Whitespace Word Match (~=)
The [class~="active"] selector matches when the class attribute contains the word "active" as a
space‑separated token.
This paragraph has the word "active" in its class list.
This paragraph does not.
Language Prefix Selector (|=)
The [|=] selector matches exact values or values followed by a hyphen. This can be used anywhere,
but is most often used for languages. [lang|="en"] selector matches lang="en" and
lang="en-US". This is useful for localization, language‑specific styling, or adjusting typographic
conventions. The following three paragraphs use lang="en-US", lang="fr", and lang="ja" respectively:
This text should use English-style quotes
.
Ce texte devrait utiliser des guillemets français
.
このテキストは 日本語の引用符
を使用します。
Data Attributes
Data attributes allow you to store custom information on elements. CSS can style based on these values using
selectors like [data-theme="warning"] — no JavaScript required.
Case-Insensitive Matching
Adding the i flag makes the match case‑insensitive:
[data-state="open" i] matches "open", "OPEN", "Open", etc.
Case-Sensitive (default)
Specificity
Attribute selectors have the same specificity as classes. For example,
button[data-variant="danger"] can override a base button style.