:scope

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

must be provided

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

must be provided

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:scope
Support in DOM API such as in querySelector() and querySelectorAll()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Voir aussi