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 (paragraph.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 AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Aucun support NonEdge Aucun support NonFirefox Support complet 32
Support complet 32
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.
IE Aucun support NonOpera Support complet 15Safari Support complet 7WebView Android Aucun support NonChrome Android ? Edge Mobile ? Firefox Android Support complet 32
Support complet 32
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 Aucun support NonSafari 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 OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 32Opera Android Aucun support NonSafari iOS Support complet 7Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
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

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, b1nj, J.DMB, teoli, louuis
Dernière mise à jour par : SphinxKnight,