An attribute selector matches an element using the presence or value of an attribute. It is useful when the attribute already represents a meaningful state or document contract.
Make this comfortable
CSS attribute selectors: target explicit document state
How the rule works
An incident table marks rows with a data-severity value and a form exposes its disabled inputs. A scoped selector can style the severity row without requiring the third row to stay third forever. Treat the data attribute as presentation metadata, not as authorization or a replacement for status text. Attribute values and selector comparisons have specific case behavior; if casing varies in a feed, normalize data before rendering rather than relying on a CSS workaround. The disabled pseudo-class follows actual control state, while a data attribute does nothing functional by itself. Inspect both visual styling and the HTML state that produced it. A selector should describe the state you intend to show, not invent it.
.incident-list [data-severity="high"] {
border-inline-start: .3rem solid #a92d3b;
padding-inline-start: .75rem;
}
.incident-form :disabled { opacity: .72; }Cost and verification
Two short attribute selectors are cheap in ordinary documents. The expensive part is maintaining multiple state representations if a class, a data attribute, and a backend value can disagree. Verify high and ordinary incidents, missing attributes, and disabled controls with keyboard access. The border must accompany a text severity label, since color and shape alone can be missed. Opacity should not reduce control text below a readable contrast; adjust the entire disabled style against its real background.
Common Mistakes
- Do not use a data attribute as access control.
- Do not hide a severity word because the border is red.
- Do not assume a disabled-looking control is actually disabled.
Connected lessons
css
selectors
web