: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
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écifications
Specification |
---|
Selectors Level 4 # the-scope-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- La pseudo-classe
:root
- Localiser des éléments du DOM grâce aux sélecteurs
Element.querySelector()
etElement.querySelectorAll()
Document.querySelector()
etDocument.querySelectorAll()
DocumentFragment.querySelector()
etDocumentFragment.querySelectorAll()
ParentNode.querySelector()
etParentNode.querySelectorAll()