: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.

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

css

: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

js

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

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

js

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

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&nbsp;:
  <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

Voir aussi