:is()
The CSS :is() pseudo-class matches an element if it matches at least one selector in its argument list and takes the specificity of the most specific argument.
CSS in Depth, Second Edition
The CSS :is() pseudo-class matches an element if it matches at least one selector in its argument list and contributes the specificity of its most specific argument.
- How it is used
- Organizes growing stylesheets by consolidating repetitive selector lists and supporting graceful selector enhancement.
- How deep it goes
- Explains matching, specificity, invalid arguments, and nesting desugaring, including effects on targeted elements.
- Examples
- Uses contact-form controls, invalid-input fallbacks, and nested button, input, textarea, and select rules.
- What you can do after
- Apply it via CSS selectors to shorten grouped rules, preserve supported fallbacks, and reason about specificity.
Tiny CSS Projects
The CSS :is() pseudo-class matches an element against any selector in a supplied selector list and takes the specificity of the most specific selector in that list.
- How it is used
- Groups form-control selectors so shared states such as checked, hover, and focus can be styled with less repetition.
- How deep it goes
- Explains selector-list matching and specificity, including an ID-selector warning, but does not detail selector specificity beyond the worked form example.
- Examples
- Uses grouped radio-button and check-box selectors, selected-state borders, and a comparison with repeated focus selectors.
- What you can do after
- Apply :is() to consolidate related selectors and control specificity when styling grouped form states.
Related concepts
- :where()equivalent to · The CSS :where() pseudo-class matches elements against a selector list while contributing zero specificity.
- pseudo-classkind of · A CSS pseudo-class is a selector construct that matches elements according to a state, condition, or structural relationship.
- specificityconfigures · CSS specificity is the priority assigned to a selector that helps determine which matching declaration takes precedence in the cascade when styles conflict.
- CSS selectoruses · A CSS selector is a pattern that identifies document elements by their names, attributes, relationships, states, or other conditions.
- CSS nestingequivalent to · CSS nesting is a stylesheet feature that allows rules to contain nested selectors and declarations expressing hierarchical or related selector structures.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.