`:scope` - Sélecteur CSS

:scope

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

Description rapide

Cible l'élément courant. Utile à l'intérieur d'une directive @scope.

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 de cibler l'élément désigné par la directive @scope.

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

Dans le cas de directives @scope imbriquées, :scope désigne toujours la racine de la directive la plus interne par rapport à la position de :scope.
Dans l'exemple ci-dessous, le premier :scope cible la section exemple1, tandis que le deuxième :scope cible les images contenues dans cette section.

Exemple pour :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, en particulier au niveau de la spécificité.

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

Samsung Internet

Chrome

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Opéra

Safari sur IOS

Safari

Firefox

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

Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.

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