:scope

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨janvier 2020⁩.

Lapseudo-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 quequerySelector(),querySelectorAll(),matches() ouclosest() —:scope correspond à l'élément sur lequel la méthode a été appelée.

Syntaxe

css

:scope {  /* ... */}

Exemples

Utiliser`:scope` comme alternative à`:root`

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>  <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>  <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'unElement déjà récupéré.

HTML

html

<div>  <div>    <div></div>    <div></div>  </div>  <div>    <div></div>  </div></div><p>  Identifiants des éléments sélectionnés&nbsp;:  <span></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 decontext est l'élément avec l'attributid decontext. Les éléments sélectionnés sont les éléments<div> qui sont des enfants directs de ce contexte —element-1 etelement-2 — mais pas leurs descendants.