Les sélecteurs CSS indispensables

Jusqu’à présent nous avons vu qu’il était possible de sélectionner un élement (le nom de la balise HTML) et de manipuler son rendu graphique. Nous avons également vu que nous pouvions cibler un élément par ses liens de parentés (ex : un paragraphe contenu dans une section) mais aussi par certains attributs que nous lui donnons spécifiquement dans le code HTML (ex : une class ou un id). Nous allons découvrir que nous pouvons également sélectionner les éléments en fonction de ce qui les entour ou à l’aide d’attributs plus spécifiques et pas nécessairement dédié à leur manipulation CSS.

Sélecteurs généraux

Sélecteur	Définition	exemple
*	Sélecteur universel, il ciblera l’ensemble des éléments présents dans la page	*{ … }
e	Sélecteur de type, il ciblera l’élément cité	p{ … }
.x	Sélecteur de classe, il ciblera l’élément possédant l’attribut class correspondant	.ma_class{ … }
#x	Sélecteur d’identifiant (id), il ciblera le seul élément de la page possédant l’attribut id correspondant	#mon_id{ … }

Sélecteurs hiérarchiques

Sélecteur	Définition	exemple
x y	Sélecteur descendant, il ciblera l’élément y enfant de l’élément x	section p{ … }
x > y	Sélecteur d’enfant, il ciblera l’élément y enfant direct de l’élément x sans impacter les « petit-enfants » de même nature	section > p{ … }
x + y	Sélecteur de frère direct, il ciblera le premier élément y suivant l’élément x sans impacter ses frères suivants	h2 + p{ … }
x ~ y	Sélecteur de l’ensemble des frères adjascents, il ciblera l’ensemble des frères y de l’élément x	h2 ~ p{ … }

Pseudo-classes

Sélecteur	Définition	exemple
x:hover	Sélecteur d’un élément lorsque celui-si est survolé par le curseur	a:hover{ … }
x:link	Sélecteur d’un élément de type « lien »	a:link{ … }
x:visited	Sélecteur d’un élément lien déjà visité par l’internaute	a:visited{ … }
x:focus	Sélecteur de l’élément d’un formulaires sélectionné par l’internaute (par exemple : un champs lors de son remplissage)	input:focus{ … }
x y:first-child	Sélecteur du premier élément enfant y d’un parent x	ul li:first-child{ … }
x y:last-child	Sélecteur du dernier élément enfant y d’un parent x	ul li:last-child{ … }
x y:nth-child(n)	Sélecteur de l’élément enfant y d’un parent x ayant pour index n (à noté qu’il est tout a fait possible de donner une règle de calcul à la valeur n de façon à cibler par exemple tous les éléments dont l’index serait un multiple de 3)	ul li:nth-child(3){ … }
x y:nth-child(odd)	Sélecteur de l’élément enfant y d’un parent x ayant pour index n ayant une valeur impaire	ul li:nth-child(odd){ … }
x y:nth-child(even)	Sélecteur de l’élément enfant y d’un parent x ayant pour index n ayant une valeur paire	ul li:nth-child(even){ … }
x:not(valeur)	Sélectionne tous les éléments qui ne correspondent pas à la sélection spécifiée dans les parenthèses.	p:not(.special){ … }

Pseudo-classes de formulaire

Sélecteur	Définition	exemple
x:focus	Sélecteur d’un élément lorsque celui-si est sélectionné par l’internaute pour la saisie	input:focus{ … }
x:placeholder	Sélecteur du texte de substitution d’un champs	input:placeholder{ … }
x:enable	cible les éléments de formulaire qui sont activés et peuvent être modifiés par l’utilisateur.	input:eanble{ … }
x:desable	cible les éléments de formulaire qui sont désactivés et ne peuvent pas être modifiés par l’utilisateur.	input:desable{ … }
x:checked	cible les cases à cocher et les options de liste déroulante qui ont été cochées.	input:checked{ … }
x:in-range	cible les éléments de formulaire de type « number » qui ont une valeur dans l’intervalle spécifié par les attributs min et max.	input:in-range{ … }
x:out-of-range	cible les éléments de formulaire de type « number » qui ont une valeur en dehors de l’intervalle spécifié par les attributs min et max.	input:out-of-range{ … }
x:valid	cible les éléments de formulaire qui ont une valeur valide selon les règles de validation spécifiées (par exemple, un champ de formulaire de type « email » qui contient une adresse e-mail valide).	input:valid{ … }
x:invalid	cible les éléments de formulaire qui ont une valeur non valide selon les règles de validation spécifiées (par exemple, un champ de formulaire de type « email » qui ne contient pas une adresse e-mail valide).	input:invalid{ … }

Sélecteurs par attribut

Sélecteur	Définition	exemple
x[attribut]	Sélectionne tous les éléments qui possèdent l’attribut spécifié	p[data-couleur]{ … }
x[attribut=valeur]	Sélectionne tous les éléments qui possèdent l’attribut spécifié avec la valeur spécifiée	body[lang=fr]{ … }
x[attribut~=valeur]	Sélectionne tous les éléments qui possèdent l’attribut spécifié avec une valeur contenant la valeur spécifiée (séparée par des espaces)	div[class~=higlight]{…}
x[attribut|=valeur]	Sélectionne tous les éléments qui possèdent l’attribut spécifié avec une valeur commençant par la valeur spécifiée suivie d’un tiret	a[href|=https://]{ … }
x[attribut^=valeur]	Sélectionne tous les éléments qui possèdent l’attribut spécifié avec une valeur commençant par la valeur spécifiée	img[title^=apercu]{ … }
x[attribut$=valeur]	Sélectionne tous les éléments qui possèdent l’attribut spécifié avec une valeur se terminant par la valeur spécifiée	a[href$=.pdf]{ … }
x[attribut*=valeur]	Sélectionne tous les éléments qui possèdent l’attribut spécifié avec une valeur contenant la valeur spécifiée n’importe où dans la chaîne de caractères	a[href*=facebook]{ … }