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éfinitionPseudo-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éfinitionPseudo-é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

1
a::after {
2
  content: " <<<< ";
3
  background-color : aqua;
4
}
5
a::before {
6
  content: " >>>> ";
7
  background-color : coral;
8
}
1
<a href="">Je suis un lien</a>
Je suis un lien
Interprétation de CSS

::first-letter : première lettre

::first-line : première ligne

1
p::first-letter {
2
  font-size: 2em;
3
  background-color: aqua;
4
}
5
p::first-line {
6
  background-color: coral;
7
}
1
<p>Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe.</p>

Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe. Je suis un paragraphe.

Interprétation de CSS

::selection : partie sélectionnée par l'utilisateur

1
.selection::selection {
2
  background-color: aqua;
3
  color : red;
4
}
1
<p class="selection">Ma sélection est originale. Ma sélection est originale. Ma sélection est originale. Ma sélection est originale.</p>
2
<p>Pas moi. Pas moi. Pas moi. Pas moi. Pas moi. Pas moi. </p>

Ma sélection est originale. Ma sélection est originale. Ma sélection est originale. Ma sélection est originale.

Pas moi. Pas moi. Pas moi. Pas moi. Pas moi. Pas moi.

Interprétation de CSS