`:scope` - Sélecteur CSS

:scope

Résumé des caractéristiques du sélecteur `:scope`

Description rapide

Cible l'élément courant. Utile dans le cas de règles imbriquées (nested CSS).

Statut

Standard

Module W3C

Sélecteurs

Références (W3C)

Selectors Level 4

Statut du document: WD (document de travail)

Description de la pseudo-classe `:scope`.

Utilisée dans une directive @scope, la pseudo-classe :scope cible l'élément racine définie par @scope. En dehors d'une directive @scope, la pseudo-classe :scope cible la racine du document HTML, elle est donc équivalente à :root. Cette pseudo-classe est surtout intéressante dans un directive, car elle permet d'écrire du CSS imbriqué (CSS nesting) : la pseudo-classe :scope ciblera alors l'élément courant.

Exemple. La directive @scope cible l'élément dont l'identifiant est intro. On applique des styles aux titres h2 inclus dans cette intro, et on applique également des styles à l'intro elle-même avec le sélecteur :scope.


	@scope (#intro) {
	   h2 { ... }
	   :scope { ... }
	}

La spécificité de :scope est 10 comme toutes les autres pseudo-classes, et ce quelque soit le sélecteur indiqué comme racine par @scope.

Voyez également la directive @scope pour plus de renseignements. Et consultez aussi la page sur & qui est un sélecteur qui ressemble à :scope mais avec cependant quelques différences.

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 navigateur avec `:scope`.

La pseudo-classe :scope est en elle-même bien reconnue depuis longtemps par les navigateurs, mais elle est intéressante depuis que les navigateurs sont capables d'imbriquer le code CSS (directive @scope).

Colonne 1

Reconnaissance par les navigateurs de la directive @scope qui limite la portée des règles qu'il contient.

Colonne 2

Reconnaissance par les navigateurs de la pseudo-classe :scope qui cible l'élément courant (voir directive @scope).

Directive
@scope

Pseudo-classe
:scope

Estimation de la prise en charge globale.

84%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Samsung Internet

Chrome

Firefox

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la pseudo-classe `:scope`.

Sélecteurs - Niveau 4

Concernant :scope. Description de la pseudo-classe :scope pour cibler l'élément courant.
On trouve également des informations dans la spécification Cascading and inheritance.

29 Septembre 2011
Document de travail.

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é sélecteurs.

:empty

Pseudo-classe ciblant les éléments sans contenu.

:first-child

Pseudo-classe ciblant le premier enfant d'un élément dans l'ordre du document.

:first-of-type

Pseudo-classe ciblant les premiers éléments de chaque type, dans l'ordre du document.

:last-child

Pseudo-classe ciblant le dernier enfant d'un élément, dans l'ordre du document.

:last-of-type

Pseudo-classe ciblant les derniers éléments de chaque type, dans l'ordre du document.

:nth-child()

Pseudo-classe ciblant un descendant d'après son numéro dans l'ordre du document.

⚠

:nth-col()

Pseudo-classe ciblant une des colonnes dans un container grille d'après son numéro.

:nth-last-child()

Pseudo-classe ciblant un élément à partir de son numéro, en commençant par la fin, et dans l'ordre du document.

⚠

:nth-last-col()

Pseudo-classe ciblant une des colonnes dans un container grille, en commençant le comptage par la fin.

:nth-last-of-type()

Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type et en commençant par la fin.

:nth-of-type()

Pseudo-classe ciblant un élément à partir de son numéro en ne comptant que les éléments du même type.

:only-child

Pseudo-classe ciblant les éléments qui sont fils uniques de leur parent.

:only-of-type

Pseudo-classe désignant les éléments qui sont fils unique de leur parent, en ne considérant que les éléments de type identique.

:root

Pseudo-classe ciblant l'élément racine du document (en HTML, l'élément racine est l'élément HTML).