Pseudo-éléments et pseudo classes en CSS

Pseudo classes et pseudo éléments.

Ces sélecteurs font référence à des éléments qui ne sont pas forcément délimités par des balises HTML. Par exemple le pseudo élément ::first-letter désigne la première lettre d'un élément, bien qu'aucune balise HTML ne délimite cette première lettre.

La distinction entre pseudo classes et pseudo éléments est la suivante :

Ceci dit, les navigateurs reconnaissent tous le simple deux points aussi bien pour les pseudo classes que pour les pseudo éléments. C'est dû au fait que les précédentes version de CSS ne distinguaient pas pseudo classes et pseudo éléments.
Dans la suite de ce tutoriel, nous utiliserons nous aussi le simple deux points dans tous les cas.

Utilisé seul, les pseudo éléments s'appliquent à toutes les balises mais il est facile de combiner un sélecteur classique avec un pseudo-élément pour en limiter la portée :

    h1:first-letter désigne la première lettre des titres h1.
    p:first-letter désigne la première lettre de chacun des paragraphes.

Attention ! Certaines pseudo classes doivent être définies dans un ordre précis. C'est le cas des pseudo classes suivantes :

  1. :link
  2. :visited
  3. :hover
  4. :active

Pseudo classes générales.

:link Désigne les liens (balises a).
:visited Désigne les liens déjà visités.
:active Désigne le lien actif (celui qui vient d'être cliqué).
:hover Désigne l'élément sur lequel la souris est positionnée, que le bouton soit enfoncé ou pas. Attention ! Certains navigateurs ne traitent :hover que sur les balises a ou input.
:first-child Désigne le premier élément enfant.
:last-child Désigne le dernier élément enfant.
:nth-child(n) Désigne l'enfant numéro n.
:only-child Désigne les balises qui sont enfant unique de leur parent.
:only-of-type Désigne les balises qui sont enfant unique de ce type.
:lang(fr) Désigne les éléments en langue française, donc ceux qui comporte l'attribut lang="fr".
:empty Désigne les éléments vides. Exemple : td:empty désigne les cellules de tableau vides.
Un ou plusieurs espaces sont considérés comme du vide mais l'espace fixe ( ) suffit à "remplir" l'élément.
:root Désigne l'élément racine.
:not(p) Opérateur "sauf". Désigne toutes les balises sauf celles qui correspondent au sélecteur indiqué. Ici sélectionne toutes les balises sauf p.

Pseudo classes relatives aux zones de saisie.

:focus Désigne la balise input qui a le focus.
:default Désigne la balise input qui est celle par défaut.
:checked Désigne la balise input qui sont cochées (fonctionne avec les balises du type case à cocher).
:enabled Désigne les balises input activées.
:disabled Désigne les balises input désactivées.
:required Désigne les balises input avec un attribut required.
:optional Désigne les balises input sans attribut required.
:read-only Désigne les balises input en lecture seule, c'est à dire avec l'attribut readonly.
:read-write Désigne les balises input en saisie possible, c'est à dire sans attribut readonly.
:valid Désigne les balises input contenant une valeur valide.
:invalid Désigne les balises input contenant une valeur invalide.
:in-range Désigne les balises input contenant une valeur comprise dans la fourchette des valeurs valides.
:out-of-range Désigne les balises input contenant une valeur non comprise dans la fourchette des valeurs valides.
:indeterminate Désigne les balises input se trouvant dans un état indéterminé.

Pseudo classes pour la mise en page à l'impression.

:left Désigne les pages de gauche (pages paires).
:right Désigne les pages de droite (pages impaires).
:first Désigne la première page.

Pseudo éléments.

::before

::after
Désigne l'emplacement situé avant et après l'élément.
Ces deux pseudo-éléments sont utilisés avec la propriété content.
::first-letter Désigne la première lettre d'un texte. Pratique pour formater des lettrines.
::first-line Désigne la première ligne de texte.
::selection Désigne le texte (ou l'élément) sélectionné.

Exemples avec les pseudo éléments first...

Dans ce bloc, la première ligne de texte est en rouge. Et les premières lettres de chaque paragraphe sont en gras et en taille double. Vous pouvez faire varier la largeur de la fenêtre du navigateur pour constater que :first-line s'ajuste en fonction.

Ce deuxième paragraphe a également sa lettrine.

En cliquant sur le bouton, vous verrez comment ont été écrits les styles pour obtenir cela. Notez l'espace dans le sélecteur de la première règle, alors qu'il n'y a pas d'espace dans la deuxième règle.
Cela change tout : la première règle (lettrine) s'applique à la première lettre de tous les enfants du cadre. Tandis que la deuxième règle (ligne rouge) s'applique à la première ligne du seul élément désigné.

Exemple avec first-child et nth-child().

Dans le tableau ci-dessous la couleur sera appliquée en fonction du sélecteur choisi.

Initialiser
td:first-child
tr:first-child
td:nth-child(2)

Exemple avec :hover.

Ceci est un lien

Ceci est un paragraphe. Certains navigateurs ne traite :hover que sur les liens et les zones de saisie.