La pseudo-classe :scope correspond aux éléments qui sont un point de référence pour faire correspondre les sélecteurs. En HTML, un nouveau point de référence peut être défini avec l'atribut scoped de l'élément <style>. Si aucun atribut n'est utilisé dans la page HTML, le point de référence est alors l'élément <html>.

/* Sélectionne un élément dans la portée */
:scope {
  background-color: lime;
}

Syntaxe

:scope

Exemples

HTML

<article>
  <p>L'élément ciblé par :scope a un fond vert si
  votre navigateur prend en charge les portées 
  de styles.</p>
  <section> 
    <p>En dehors de la portée.</p>
  </section>
  <section>
    <style scoped>
      :scope {
        background-color: lime;
      }
    </style>
    <p>À l'intérieur de la portée.</p>
  </section>
  <section> 
    <p>En dehors de la portée.</p>
  </section
</article>

Résultat

Spécifications

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 (Oui)[1] 32[2] Pas de support 15[1] 7.0[1]
Avec .querySelector/.querySelectorAll (Oui) 32 Pas de support 15[1] 7.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple ? 32[2] Pas de support Pas de support 7.0
Avec.querySelector/.querySelectorAll ? 32 Pas de support Pas de support 7.0

[1] Bien que Safari et Chrome enregistrent une correspondance pour cette pseudo-classe et appliquent les règles CSS correspondantes, ils ne prennent pas en charge les portées de style. Par conséquent, les règles CSS « débordent » en dehors de la portée visée. Cette fonctionnalité est prise en charge pour Chrome 20 et les versions ultérieures en activant « les fonctionnalités expérimentales de la plate-forme web » via chrome://flags.

[2] Gecko 20 et les versions ultérieures implémentent :scope mais il faut activer la préférence layout.css.scope-pseudo.enabled. Cette fonctionnalité est activée par défaut depuis Firefox 32.

Voir aussi

Étiquettes et contributeurs liés au document

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