:where()

Brouillon
Cette page n'est pas terminée.

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La pseudo-classe fonctionnelle :where() prend comme argument une liste de sélecteurs et cible tout élément qui peut être sélectionné par l'un des sélecteurs de la liste.

La différence entre :where() et :is() est la suivante : :where() aura toujours une spécificité nulle tandis que :is() prend la spécificité du sélecteur passé en argument le plus spécifique.

Syntaxe

:where( <complex-selector-list> )


<complex-selector-list> = <complex-selector>#


<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*


<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]


<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> ')'


<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>? ']'


<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':where()' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:where()Chrome Support complet 72
Désactivée
Support complet 72
Désactivée
Désactivée From version 72: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge Aucun support NonFirefox Support complet 78
Support complet 78
Support complet 77
Notes Désactivée
Notes Enabled by default in Firefox Nightly.
Désactivée From version 77: this feature is behind the layout.css.is-where-selectors.enabled preference (needs to be set to enabled). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Aucun support NonSafari Support complet 14WebView Android Aucun support NonChrome Android Support complet 72
Désactivée
Support complet 72
Désactivée
Désactivée From version 72: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android Support complet 79Opera Android Aucun support NonSafari iOS Support complet 14Samsung Internet Android Aucun support Non
Support for forgiving selector listChrome Aucun support NonEdge Aucun support NonFirefox Support complet 82IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Support complet 82Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi