Draft
This page is not complete.
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
The difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.
Syntax
:where( <complex-selector-list> )where
<complex-selector-list> = <complex-selector>#where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Specifications
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4 The definition of ':where()' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
No compatibility data found. Please contribute data for "css.selectors.where" (depth: 1) to the MDN compatibility data repository.