W3docs
fr
Se connecter

CSS :scope Pseudo-classe

La pseudo-classe CSS :scope représente les éléments de portée. Lisez à propos de cette pseudo-classe et pratiquez avec des exemples.

La pseudo-classe CSS :scope correspond à l'élément par rapport auquel un sélecteur est résolu — son élément de référence. Dans les requêtes DOM ordinaires, cet élément de référence est celui sur lequel vous appelez la méthode de requête ; dans un Shadow DOM, il s'agit de la racine shadow.

Cette page explique ce que « portée » signifie pour un sélecteur, pourquoi :scope est principalement un outil JavaScript plutôt qu'un outil de feuille de styles, les deux principaux endroits où il modifie le comportement, et les pièges à surveiller.

Qu'est-ce que l'élément de référence

Chaque sélecteur est mis en correspondance par rapport à un certain élément. Lorsque vous écrivez du CSS dans une feuille de styles, l'élément de référence est la racine du document, donc :scope y est équivalent à :root et est rarement utile en soi.

:scope devient significatif lorsque l'élément de référence n'est pas la racine — notamment lorsque vous interrogez le DOM depuis JavaScript :

  • element.querySelector(selector) et element.querySelectorAll(selector) résolvent le sélecteur par rapport à element. Ici, :scope fait référence à element lui-même.
  • Les méthodes de requête d'un ShadowRoot utilisent la racine shadow comme élément de référence.

Sans :scope, un sélecteur passé à element.querySelector() est toujours mis en correspondance contre le sous-arbre entier, sans être ancré à element. Cela surprend beaucoup de développeurs — voir le piège ci-dessous.

Pourquoi l'utiliser

La principale raison d'utiliser :scope est d'ancrer un sélecteur à l'élément que vous interrogez, afin de pouvoir faire correspondre des enfants directs ou d'exprimer « relatif à ici » :

// Match only sections that are direct children of container.
container.querySelectorAll(':scope > section');

:scope est significatif dans les méthodes de requête listées ci-dessus (querySelector, querySelectorAll, et la vérification en direct Element.matches()). Il n'a aucun effet spécial dans closest() ni dans les règles de feuille de styles ordinaires.

Remarque : l'ancien attribut <style scoped>, qui permettait autrefois à un bloc <style> de s'appliquer uniquement à l'intérieur de son élément parent, a été supprimé des navigateurs. La portée des styles se fait aujourd'hui avec le Shadow DOM (ou des outils de construction), et :scope subsiste en tant qu'assistant pour les requêtes DOM.

Version

Selectors Level 4

Syntaxe

Dans une feuille de styles, la syntaxe est la même que pour toute autre pseudo-classe :

:scope {
  /* declarations — equivalent to :root in a normal stylesheet */
}

En JavaScript, elle est passée à l'intérieur de la chaîne de sélecteur :

element.querySelectorAll(':scope > .child');

Exemple : ancrer une requête à son élément

Dans l'exemple ci-dessous, container.querySelector(':scope > section') sélectionne uniquement le <section> qui est un enfant direct de .container. La section correspondante est recolorée pour confirmer que la requête l'a trouvée.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        margin: 40px auto;
        max-width: 700px;
        background-color: #eeeeee;
        padding: 20px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      }
      section {
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
    <script>
      const container = document.querySelector('.container');
      const scopeElement = container.querySelector(':scope > section');
      scopeElement.style.backgroundColor = '#1c87c9';
      scopeElement.style.color = '#fff';
    </script>
  </body>
</html>
Essayez vous-même »

Piège courant : sélectionner les enfants directs

La raison la plus courante d'utiliser :scope est de sélectionner les enfants immédiats de l'élément que vous interrogez. Un combinateur tel que > .x ne peut pas se tenir seul — element.querySelector('> .x') lève une SyntaxError. Vous avez besoin d'un côté gauche, et :scope le fournit :

<ul id="list">
  <li>A</li>
  <li>
    <ul>
      <li>B (nested)</li>
    </ul>
  </li>
</ul>
const list = document.getElementById('list');

// SyntaxError — "> li" is not a complete selector:
// list.querySelectorAll('> li');

// Correct: only the direct <li> children of #list (A and the one wrapping the nested list),
// NOT "B (nested)".
list.querySelectorAll(':scope > li');

Sans :scope, list.querySelectorAll('li') retournerait également l'élément B imbriqué, car un sélecteur de descendant simple atteint tout le sous-arbre. :scope > est la manière idiomatique de dire « enfants directs de l'élément que j'interroge ».

Prise en charge des navigateurs

:scope est pris en charge dans tous les navigateurs modernes pour les méthodes de requête DOM. Il n'a aucun effet en tant que règle de style dans une feuille de styles normale, si ce n'est se comporter comme :root.

Chapitres associés

Pratique

Pratique
À quoi fait référence la portée en CSS ?
À quoi fait référence la portée en CSS ?
Was this page helpful?