:scope

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨janvier 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; }

Le ou les éléments auxquels correspond :scope dépendent du contexte dans lequel il est utilisé :

Lorsqu'il est utilisé au niveau racine d'une feuille de style, :scope équivaut à :root, qui, dans un document HTML standard, correspond à l'élément <html>.
Lorsqu'il est utilisé à l'intérieur d'un bloc @scope, :scope correspond à la racine de la portée définie du bloc. Il permet d'appliquer des styles à la racine de la portée à partir du bloc @scope lui-même.
Lorsqu'il est utilisé dans un appel API DOM, tel que querySelector(), querySelectorAll(), matches() ou closest() — :scope correspond à l'élément sur lequel la méthode a été appelée.

Syntaxe

css

:scope { /* ... */ }

Cet exemple montre que :scope est équivalent à :root lorsqu'il est utilisé au niveau racine d'une feuille de style. Dans ce cas, le CSS fourni colore l'arrière-plan de l'élément <html> en orange.

css

:scope { background-color: orange; }

Utiliser `:scope` pour mettre en forme la racine de la portée dans un bloc `@scope`

Dans cet exemple, nous utilisons deux blocs @scope séparés pour faire correspondre les liens à l'intérieur des éléments avec une classe .light-scheme et .dark-scheme respectivement. Notez comment :scope est utilisé pour sélectionner et fournir un style aux racines de portée elles-mêmes. Dans cet exemple, les racines de portée sont les éléments <div> qui ont les classes appliquées.

HTML

html

<div class="light-scheme"> <p> Le MDN contient beaucoup d'informations sur <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a>. </p> </div> <div class="dark-scheme"> <p> Le MDN contient beaucoup d'informations sur <a href="/fr/docs/Web/HTML">HTML</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et <a href="/fr/docs/Web/JavaScript">JavaScript</a>. </p> </div>

CSS

div { padding: 10px; }

css

@scope (.light-scheme) { :scope { background-color: plum; } a { color: darkmagenta; } } @scope (.dark-scheme) { :scope { background-color: darkmagenta; color: antiquewhite; } a { color: plum; } }

Résultat

Utiliser `:scope` dans JavaScript

Cet exemple démontre l'utilisation de la pseudo-classe :scope dans JavaScript. Cela peut être utile si vous devez obtenir un descendant direct d'un Element déjà récupéré.

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>

JavaScript

const context = document.getElementById("context"); const selected = context.querySelectorAll(":scope > div"); document.getElementById("results").textContent = Array.prototype.map .call(selected, (element) => `#${element.getAttribute("id")}`) .join(", ");

Résultat

La portée de context est l'élément avec l'attribut id de context. Les éléments sélectionnés sont les éléments <div> qui sont des enfants directs de ce contexte — element-1 et element-2 — mais pas leurs descendants.