:scope
La pseudo-classe CSS :scope
représente les éléments qui sont des points de référence ou des portées auxquels 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 explicite pour créer un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que querySelector()
, querySelectorAll()
, matches()
ou closest()
, :scope
correspond à l'élément sur lequel la méthode est appelée.
Syntaxe
:scope {
/* … */
}
Exemples
Identité
Dans cet exemple, on voit comment utiliser la pseudo-classe :scope
avec la méthode Element.matches()
afin de désigner l'élément sur lequel la méthode est appelée. Ici, si :scope
est prise en charge et que le paragraphe est contenu dans la portée de :root
, le texte est affiché dans le paragraphe avec l'identifiant output
.
JavaScript
const paragraph = document.getElementById("para");
const output = document.getElementById("output");
if (paragraph.matches(":scope")) {
output.textContent =
"Le premier paragraphe est sa propre portée, comme attendu !";
}
HTML
<p id="para">
Ceci est un paragraphe, pas forcément intéressant en tant que tel.
</p>
<p id="output"></p>
Résultat
Enfants directs
La pseudo-classe :scope
peut également s'avérer utile lorsqu'on doit obtenir un descendant direct d'un élément Element
.
JavaScript
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").innerHTML = Array.prototype.map
.call(selected, (element) => `#${element.getAttribute("id")}`)
.join(", ");
HTML
<div id="context">
<div id="element-1">
<div id="element-1.1"></div>
<div id="element-1.2"></div>
</div>
<div id="element-2">
<div id="element-2.1"></div>
</div>
</div>
<p>
Identifiants des éléments sélectionnés :
<span id="results"></span>
</p>
Résultat
La portée de context
est l'élément dont l'identifiant (id
) vaut context
. Les éléments sélectionnés sont les éléments <div>
qui sont des enfants directs de ce contexte, c'est-à-dire element-1
et element-2
, mais pas leurs descendants à eux.
Spécifications
Specification |
---|
Selectors Level 4 # the-scope-pseudo |
Compatibilité des navigateurs
BCD tables only load in the browser