:scope - Sélecteur CSS
Résumé des caractéristiques du sélecteur :scope
Description de la pseudo-classe :scope.
Utilisation de :scope en CSS.
Pour le moment, la pseudo-classe :scope cible la racine du document HTML, elle est donc équivalente à :root.
Les évolutions prévues dans la spécification rendront cette pseudo-classe plus intéressante, en particulier, la possibilité
d'écrire du CSS imbriqué (CSS nesting) : la pseudo-classe :scope ciblera alors l'élément courant.
Utilisation de :scope en Javascript.
Comme tous les autres sélecteurs, la pseudo-classe :scope peut être utilisée avec les méthodes Javascript
querySelector() et querySelectorAll().
Voici par exemple une fonction qui applique un contour à toutes les images du paragraphe sur lequel on clique.
Le ciblage des images utilise un sélecteur qui fait intervenir la pseudo-classe :scope.
function entourerImg(el) {
var images = el.querySelectorAll(':scope > img');
images.forEach((img) => {
img.style.outline="1px solid red";
});
}
Compatibilité des navigateurs.
La pseudo-classe :scope est en elle-même bien reconnue par les navigateurs actuels, mais sont intérêt est limité
du fait que le CSS imbriqué n'est toujours pas pris en charge.
:scope:scope avec querySelector()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi...
Pour compléter votre information, reportez-vous étalement à la description des sélecteurs ci-après. Si vous souhaitez consulter la spécification du W3C, cherchez le module nommé "Selectors".
:root: Pseudo-classe désignant l'élément racine.