The attribute presence selector [attr] matches any element that has that attribute set in the HTML—the value does not matter.
Example: a[title] styles every link that has a title attribute. Other operators (=, *=, ^=, …) match by value; those have their own pages below.
[href] matches any element with an href. [href="https://example.org"] matches only that exact value. See equals.
i / sValue operators can add i (ASCII case-insensitive) or s (case-sensitive). Support for s varies more than for base attribute selectors.
[attr] { … }Optional element type: a[title], input[placeholder].
| Pattern | Description | Try it |
|---|---|---|
[title] | Any element with a title attribute | Try it |
input[placeholder] | Only input elements that have placeholder | Try it |
:not([lang]) | Elements that do not have a lang attribute | Try it |
[href="…"] family | Value matchers (=, *=, ^=, $=, ~=, |=) | Try it |
[attr]Name the attribute in brackets. Optionally prefix an element type.
[attr] or element[attr].| Piece | Required? | Role |
|---|---|---|
| Element type | No | Narrows the match (e.g. a, input) |
[attr] | Yes | Requires the attribute to be present |
| Attribute value | No (for presence) | Ignored by [attr]; used by other operators |
Links with a title turn purple via a[title]. The plain link has no title, so it stays blue.
Each snippet focuses on attribute presence. Use Try It Yourself for a live editor.
Style every anchor that has a title attribute.
a[title] {
color: purple;
}[title] means “has title.”a so only anchors match.title are untouched.Highlight form fields that show placeholder text.
input[placeholder] {
border: 2px solid #2563eb;
}input type selector.[placeholder] filters to fields that declare one.:not()Italicize elements that do not have a lang attribute.
div[lang] {
font-weight: bold;
}
div:not([lang]) {
font-style: italic;
}div[lang] selects divs that declare lang.:not(). div:not([lang]) selects the rest.required, disabled, and more.Presence is simple—most mistakes come from expecting a value check.
[attr] does not read the valuehref="" still matches [href]. Empty is still present. Use equals or other operators to filter values.
<input disabled> matches [disabled] even with no value written.
HTML attribute names are case-insensitive. Values like class / id / data-* are case-sensitive unless you add i.
For value operators, quote strings that contain spaces or special characters: [title="Hello world"].
.class for class names[class] only checks that class exists. To target a class name, use .name or [class~="name"].
Attribute selectors are browser CSS selectors. Node.js, Deno, and Bun do not evaluate them.
Core attribute selectors are Baseline Widely available. The case-sensitive s flag has more limited support than the base syntax.
Bottom line: Production-ready for [attr] and common value operators. Prefer i for case-insensitive value matches when needed; treat s as optional.
[attr] or element[attr].:not([attr]) to style missing attributes.One line: [attr] means “this attribute exists”—not “it equals this value.”
Learn how to match attribute values that contain a substring.
8 people found this page helpful