Pseudo-sélecteurs
Les pseudo-sélecteurs permettent de sélectionner des parties d'éléments ou des éléments dans un certain contexte (la première lettre, au survol, quand un élément est actif...).
On sépare les pseudo-éléments en deux familles :
pseudo-classes
pseudo-éléments
Définition : Pseudo-classes
Les pseudo-classes permettent de sélectionner les éléments en fonction du contexte.
C'est à dire de l'état de l'élément : actif, survolé, position dans l’arborescence...
Pour cela il suffit de faire suivre immédiatement le sélecteur de deux-points ( : ) et du mot clé du contexte.
//*************************//
Structure :
:first-child : premier enfant
:first-of-type : premier enfant d'un type
:last-child : dernier enfant
:last-of-type : dernier enfant d'un type
:nth-child(an+b) : an+b ième enfant, a et b entier. mot-clé : odd = 2n+1 even = 2n
:nth-last-child(an+b) : comme nth-child mais à partir de la fin
:nth-last-of-type(an+b) : comme nth-of-type mais à partir de la fin
:nth-of-type(an+b) : an+b ième frère de même type
:only-child : seul enfant
:only-of-type : seul enfant d'un type
:empty : élément qui n'a pas d'enfant
:not() : n'est pas ex : :not(div p) n'est pas un paragraphe dans un div
//*************************//
Lien :
:link : lien n'ayant pas été visité
:visited : lien visité
//*************************//
Saisie :
:checked : champ coché
:in-range : champ dont la valeur est entre le min et le max
:invalid : champ dont la valeur est incorrect
:optional : champ n'étant pas required
:out-of-range : champ dont la valeur n'est pas entre le min et le max
:required : champ required
:valid : champ dont la valeur est correct
:disabled : élément ne pouvant pas avoir le focus
:enabled : élément pouvant avoir le focus
:read-only : lecture seul
:read-write : peut-être édité
:default : élément par défaut
//*************************//
Action :
:active : élément activé
:focus : reçoit le focus
:focus-within : Un des descendants a reçu le focus
:hover : survolé
//*************************//
Langue :
:lang() : mise en forme selon la langue
Définition : Pseudo-éléments
Les pseudo-éléments permettent d'agir sur une partie ou une position de l’élément sélectionné (premier caractère, après l'élément...).
Pour cela il suffit de faire suivre immédiatement le sélecteur de deux fois deux-points ( :: ) et du mot clé.
::after : ajoute un contenu après l'élément
::before : ajoute un contenu avant l'élément
See the Pen cours-css-pseudo-elements-after by BCMM-W2D (@bcmm-w2d) on CodePen.
::first-letter : première lettre
::first-line : première ligne
See the Pen cours-css-pseudo-elements-first by BCMM-W2D (@bcmm-w2d) on CodePen.
::selection : partie sélectionnée par l'utilisateur
See the Pen cours-css-pseudo-elements-selection by BCMM-W2D (@bcmm-w2d) on CodePen.