:scope

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

css

/* 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

Error: could not find syntax for this item

Exemples

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

JavaScript

js

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

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