:scope

La pseudo-classe :scope correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.

/* Sélectionne un élément dans la portée */
:scope {
  background-color: lime;
}

À l'heure actuelle, lorsqu'elle est utilisée dans une feuille de style, :scope est identique à :root car il n'existe pas de moyen pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que querySelector(), querySelectorAll(), matches() ou Element.closest(), :scope correspond à l'élément sur lequel la méthode est appelée.

Syntaxe

:scope

Exemples

Dans cet exemple, on voit comment utiliser :scope via la méthode Element.matches().

JavaScript

let paragraphe = document.getElementById("para");
let output = document.getElementById("output");

if (paragraphe.matches(":scope")) {
  output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
}

HTML

<p id="para">
  Voici un paragraphe, pas vraiment intéressant mais bon.
</p>
<p id="output"></p>

Résultat

Spéifications

Spécification État Commentaires
Selectors Level 4
La définition de ':scope' 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
:scopeChrome Support complet 27Edge Aucun support NonFirefox Support complet 32
Notes
Support complet 32
Notes
Notes Firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported. <style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it.
Aucun support 20 — 32
Désactivée
Désactivée From version 20 until version 32 (exclusive): this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 15Safari Support complet 7WebView Android Support complet ≤37Chrome Android Support complet 27Firefox Android Support complet 32
Notes
Support complet 32
Notes
Notes Firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is still supported. <style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it.
Support complet 20
Désactivée
Désactivée From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 15Safari iOS Support complet 7Samsung Internet Android Aucun support Non
Support in DOM API such as in querySelector() and querySelectorAll()Chrome Support complet 27Edge Aucun support NonFirefox Support complet 32IE Aucun support NonOpera Support complet 15Safari Support complet 7WebView Android Support complet ≤37Chrome Android Support complet 27Firefox Android Support complet 32Opera Android Support complet 15Safari iOS Support complet 7Samsung 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