source : https://www.pierre-giraud.com/liste-selecteurs-css-utilisation/

 

Liste complète de tous les sélecteurs CSS (sélecteurs CSS3 et CSS4 inclus)

Vous pourrez trouver ci-dessous une liste exhaustive de tous les sélecteurs CSS que l’on va pouvoir utiliser pour cibler du contenu HTML. Attention cependant : certains des sélecteurs de cette liste sont encore en phase expérimentale et ne vont pas fonctionner avec tous les navigateurs tout simplement car ils seront intégrés dans la prochaine grande version du CSS : le CSS4.

Pour cette raison, le tableau ci-dessous contient la version CSS à laquelle est attachée chaque sélecteur afin que vous puissiez rapidement voir et savoir si un sélecteur va pouvoir être directement utilisable ou pas.

Nous détaillerons dans la suite de ce tutoriel le fonctionnement de chacun des sélecteurs CSS supportés par la majorité des navigateurs.

Sélecteur Description Version CSS
E Sélectionne tous les élément de type E 1
E .maclasse Sélectionne les éléments E possédant un attribut class="maclasse" 1
E #monid Sélectionne un élément E possédant un attribut id="monid" 1
E:link Sélectionne tout élément E représentant l’ancre d’un lien non visité jusqu’à présent 1
E:visited Sélectionne tout élément E représentant l’ancre d’un lien déjà visité 1
E, F Sélectionne tous les éléments de type E et de type F 1
E F Sélectionne tous les éléments F à l’intérieur des éléments E 1
E:active Sélectionne un élément E qui est actuellement cliqué 1
E::first-letter Sélectionne la première lettre de tout élément E 1
E::first-line Sélectionne la première ligne (dans le résultat final) de tout élément E 1
* Sélectionne tous les éléments 2
E > F Sélectionne les éléments F enfants directs des éléments E 2
E + F Sélectionne tout élément F placé directement après un élément E 2
E[foo] Sélectionne tout élément E possédant un attribut foo 2
E[foo="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » 2
E[foo~="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur contient distinctement « bar » (c’est-à-dire dont la valeur contient le mot « bar » séparé du reste par des espaces) 2
E[foo|="en"] Sélectionne tout élément E possédant un attribut foo dont la valeur commence par « en » séparé du reste par un tiret (ou hyphen en anglais) 2
E:hover Sélectionne un élément E qui se situe sous le curseur de la souris 2
E:focus Sélectionne un élément E qui a le focus 2
E:first-child Sélectionne tout élément E étant le premier enfant de son parent 2
E:lang(fr) Sélectionne tout élément E dont l’attribut langage possède la valeur « fr » 2
E::after Ce sélecteur permet d’intégrer du contenu après un élément E 2
E::before Ce sélecteur permet d’intégrer du contenu avant un élément E 2
E ~ F Sélectionne tout élément F placé après un élément E dans la page 3
E[foo^="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur commence exactement par « bar » 3
E[foo$="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur se termine exactement par « bar » 3
E[foo*="bar"] Sélectionne tout élément E possédant un attribut foo dont la valeur contient la valeur « bar » 3
E:target Sélectionne un élément E contenant une ancre qui vient d’être cliquée à partir d’un lien ancre 3
E:enabled Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est activé 3
E:disabled Sélectionne tout élément E avec lequel l’utilisateur peut interagir et qui est desactivé 3
E:root

 

 Sélectionne un élément E racine du document 3
E:empty Sélectionne tout élément E qui ne possède pas d’enfant (ni de noeud de type texte) 3
E:nth-child(n) Sélectionne tout élément E étant le n-ième enfant de son parent 3
E:nth-last-child(n) Sélectionne tout élément E étant le n-ième enfant de son parent en comptant les enfants à partir du dernier 3
E:checked Sélectionne tout élément E de type input coché au sens large (checked ou selected) 3
E:last-child Sélectionne tout élément E étant le dernier enfant de son parent 3
E:only-child Sélectionne tout élément E qui est le seul enfant de son parent 3
E:nth-of-type(n) Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parent 3
E:nth-last-of-type(n) Sélectionne tout élément E étant le n-ième enfant d’un certain type par rapport à son parent en comptant à partir de la fin 3
E:first-of-type Sélectionne tout élément E premier enfant de son type par rapport à son parent 3
E:last-of-type Sélectionne tout élément E dernier enfant de son type par rapport à son parent 3
E:only-of-type Sélectionne tout élément E seul enfant de son type par rapport à son parent 3
E:read-write Sélectionne tout élément E de type input avec lequel l’utilisateur peut interagir (comme un champ dans lequel il peut écrire par exemple) 3-UI/4
E:read-only Sélectionne tout élément E de type input avec lequel l’utilisateur ne peut pas interagir (éléments possédant un attribut disabled par exemple) 3-UI/4
E:placeholder-shown Sélectionne tout élément E qui affiche actuellement la valeur de son attribut placeholder 3-UI/4
E:default Sélectionne un élément E dans une liste ou un groupe qui est l’élément défini par défaut 3-UI/4
E:valid Sélectionne tout élément E de type input dont la valeur est évaluée comme valide (dont la valeur possède une forme correspondant à ce qui est attendu) 3-UI/4
E:invalid Sélectionne tout élément E de type input dont la valeur est évaluée comme invalide (valeur ne correspondant pas à ce qui est attendu) 3-UI/4
E:in-range Sélectionne tout élément E de type input dont la valeur fournie se situe dans une fourchette de valeurs prédéfinies 3-UI/4
E:out-of-range Sélectionne tout élément E de type input dont la valeur fournie se situe en dehors d’une certaine fourchette de valeurs prédéfinies 3-UI/4
E:required Sélectionne tout élément E de type input dont la valeur doit être renseignée (élément possédant un attribut required) 3-UI/4
E:optional Sélectionne tout élément E de type input dont la valeur ne doit pas obligatoirement être renseignée 3-UI/4
E:not(E1, .c1) Sélectionne tout élément E qui n’est pas de type E1 et qui ne possède pas d’attribut class= »c1″ 3/4
E::selection Permet de sélectionner une partie active d’un élément E déjà sélectionnée par l’utilisateur 3/4
E >> F

 

 Sélectionne tous les éléments F à l’intérieur des éléments E. Ce sélecteur est strictement équivalent au précédent mais représente la nouvelle syntaxe de celui-ci qui sera rendue officielle avec le CSS4. 4
F || E Sélectionne un élément E qui représente une cellule dans un tableau ou dans une grille appartenant à une colonne représentée par un élément F 4
E[foo="bar" i] Sélectionne tout élément E possédant un attribut foo dont la valeur est exactement « bar » sans tenir compte de la casse (l’utilisation de majuscules / minuscules). Le « i » représente ici « case insensitive » c’est-à-dire « insensible à la casse » en français 4
E:any-link Sélectionne tout élément E étant l’ancre d’un lien, que celui-ci ait été cliqué ou non. Utiliser cette pseudo classe est équivalent à utiliser :link et :visited 4
E:scope Sélectionne un élément E étant l’élément de référence désigné. 4
E:current Sélectionne un élément E actuellement affiché ou lu au sein d’un canvas comportant une dimension temporelle ou l’un de ses parents 4
E:current() Alternative à E:current. On va pouvoir passer une liste de sélecteurs en argument de :current(). L’élément sélectionné sera l’élément :current qui correspond au(x) sélecteur(s) passé(s) 4
E:past Sélectionne un élément E dont l’affichage précède immédiatement celui de l’élément :current 4
E:future Sélectionne un élément E dont l’affichage suit immédiatement celui de l’élément :current 4
E:drop Sélectionne un élément E qui peut potentiellement recevoir un objet HTML dans le cadre d’un glissé-déposé (drag and drop) 4
E:drop(active) Version alternative de E:drop. Sélectionne l’élément E qui est actuellement la cible d’un drag and drop pour l’élément que l’on est en train de faire glisser 4
E:drop(valid) Version alternative de E:drop. Sélectionne l’élément E qui est actuellement la cible d’un drag and drop pour l’élément que l’on est en train de faire glisser uniquement si cet élément peut recevoir l’objet qui va y être déposé 4
E:drop(invalid) Sélectionne tout élément E qui ne peut pas recevoir l’objet actuellement glissé mais qui pourrait recevoir un autre type d’objet 4
E:indeterminate Sélectionne tout élément E de type input qui est dans un état indéterminé, c’est-à-dire ni coché ni non-coché 4
E:user-error Sélectionne tout élément E de type input altéré par l’utilisateur et dont la valeur passée est invalide 4
E:blank Sélectionne tout élément E ne possédant pas de contenu à part éventuellement des espaces 4
E:nth-column(n)

 

 Sélectionne tout élément E représentant une cellule appartenant à la n-ième colonne d’un tableau ou d’une grille 4
E:nth-last-column(n) Sélectionne tout élément E représentant une cellule appartenant à la n-ième colonne d’un tableau ou d’une grille en comptant à partir de la fin 4
:playing Sélectionne tout média capable d’être joué (audio, vidéo…) lorsque l’élément en question est en train d’être joué (ou lu) 4
:paused Sélectionne tout média capable d’être joué (audio, vidéo…) lorsque l’élément en question n’est pas en cours de lecture (en pause, en cours de chargement etc.) 4
E:matches(E1, .c1) Sélectionne tout élément E qui est soit de type E1 ou qui possède un attribut class= »c1″ 4
E:has(E1, .c1) Sélectionne un élément E si au moins un des sélecteurs passés en paramètre correspond à l’élément (selon la portée, :scope, de l’élément) 4
E:dir(ltr) Sélectionne tout élément E dont on à spécifié une direction de lecture « de gauche à droite » (la direction est à priori déterminée par la langue déclarée dans le document. Par exemple, pour le français, ce sera de gauche à droite par défaut) 4
E::inactive-selection Permet de sélectionner une partie inactive d’un élément E déjà sélectionnée par l’utilisateur 4
E::spelling-error Sélectionne une partie d’un élément E qui a été identifiée par le user agent comme mal orthographiée 4
E::grammar-error Sélectionne une partie d’un élément E qui a été identifiée par le user agent comme grammaticalement incorrecte 4
E::marker Permet de sélectionner le marqueur de tout élément E dont le type d’affichage est display : list-item (par exemple la puce ou le numéro de l’élément d’un élément li) 4
E::placeholder Sélectionne le texte de l’attribut placeholder d’un élément E de type input 4