La pseudo-classe :scope correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs.

/* 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 pour identifier un élément dont la portée est restreinte. Lorsqu'elle est utilisée à travers des méthodes telles que querySelector(), querySelectorAll(), matches() ou Element.closest(), :scope correspond à l'élément sur lequel la méthode est appelée.

Syntaxe

:scope

Exemples

Dans cet exemple, on voit comment utiliser :scope via la méthode Element.matches().

JavaScript

let paragraphe = document.getElementById("para");
let output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.innerText = "Oui l'élément est dans sa propre portée, comme attendu !";
}

HTML

<p id="para">
  Voici un paragraphe, pas vraiment intéressant mais bon.
</p>
<p id="output"></p>

Résultat

Spéifications

Spécification État Commentaires
Selectors Level 4
La définition de ':scope' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support 20 (20)[1] Pas de support 15 7.0
Avec querySelector() et querySelectorAll() 27 32 (32)[1][2] Pas de support 15 7.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support 20.0 (20)[1] Pas de support Pas de support 7.0
Avec querySelector() et querySelectorAll() 27 32.0 (32)[1][2] Pas de support Pas de support 7.0

[1] Firefox 20 implémente la pseudo-classe :scope mais cette fonctionnalité est désactivée par défaut. Pour l'activer, il faut passer la préférence layout.css.scope-pseudo.enabled à true. À partir de Firefox 32, cette préférence est activée par défaut sur le canal release de Firefox (bug 528456).

[2] Gecko 55 (Firefox 55) ne prend plus en charge <style scoped> mais continue de prendre en charge :scope. <style scoped> permet de définir explicitement la portée d'éléments mais les discussions de conception allant et le manque d'implémentations aidant, il a été décidé de retirer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, b1nj, J.DMB, teoli, louuis
 Dernière mise à jour par : SphinxKnight,