:scope

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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>.

Syntaxe

:scope { style properties }

Exemples

HTML

<article>
  L'élément ciblé par :scope a un fond vert si
  votre navigateur prend en charge les portées 
  de styles.
  <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.

[3]

Voir aussi

Étiquettes et contributeurs liés au document

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