Le Hollandais Volant

En CSS, on a à faire à des classes, des ID, des éléments… Parfois on rencontre aussi ce que l’on appelle des pseudo-classes et des pseudo-éléments.
Il ne faut pas confondre les deux : la différence est tout à fait logique mais je vais la réexpliquer ici.

Quand on a le code HTML suivant :

<p class="auth-date">
    Écrit par <span class="author">Moi</span>, <span>Aujourd’hui</span>.
</p>

Qui affiche :

Écrit par Moi, Aujourd’hui.

On a trois éléments :

• p
• span
• span

Ce sont des éléments HTML. On les appelait parfois « balises » ou « tag », mais ce sont des éléments. Selon l’élément, la disposition peut varier (un <table> organisera les données sous la forme d’un tableau, par exemple), mais globalement ce sont les éléments qui contiennent les données affichées à l’écran.

En plus des éléments HTML, on a des classes CSS. Ici on en a deux :

• .auth-date
• .author

Les classes seules servent à rien : elles ne modifient pas ce qui est affiché à l’écran, ne sont pas visibles, etc. C’est en CSS qu’elles sont utiles : elles permettent de modifier le comportement des éléments.
Le CSS permet par exemple d’afficher tous les éléments de classe "author" en rouge. Dans ce cas là, le « Moi » sera en rouge.

Tout ce qui précède est tout à fait basique, mais ça va servir pour comprendre les pseudo-classes et les pseudo-éléments.

Il faut retenir deux choses :

• les éléments contiennent le texte ou les données affichées à l’écran ;
• les classes modifient le comportement du texte ou des données qui sont dans les éléments.

À partir de là, on peut trier les pseudo-classes et les pseudo-éléments en CSS:

•  ::before et ::after permettent d’afficher du contenu supplémentaire dans la page, à côté d’un élément déjà existant.
•  :hover, :active, :visited, etc. permettent de modifier le comportement d’un élément lors d’une action ou d’une situation (respectivement au survol, au clic, et dans la situation où un lien a déjà été visité) ;

Vous le comprenez donc, je présume :

•  ::before et ::after sont des pseudo-éléments (ajoutent du contenu à la page, notamment avec la propriété « content » propre aux pseudo-éléments).
•  :hover, :active, :visited, etc. sont des pseudo-classes (modifient le comportement d’un élément);

Avant le CSS3, on notait les pseudo-classes et les pseudo éléments de la même façon, avec les deux-points « : ». Depuis le CSS3, il a été introduit le fait de noter les pseudo-classes avec les deux-points « : » et les pseudo-éléments avec deux fois deux-points « :: ».

Les pseudo-éléments sont au nombre de quatre depuis bien longtemps, ::before, ::after, ::first-letter et ::first-line.
Les pseduo-classes sont plus nombreuses : on avait déjà les :hover, :focus, :active, :link ou :visited, maintenant on a plein d’autres, en particulier pour les formulaires, comme :valid, :invalid, :checked, :not(), etc.

Et… on peut très bien combiner tout ça : un élément peut avoir une classe ? Et bien un pseudo-élément peut avoir une pseudo-classe ! On peut très bien faire un des exemples ci-dessous :

element::after:hover {
    // ici le CSS pour modifier le ::after lors du survol du ::after
}

element:hover::after {
    // ici le CSS pour modifier le ::after lors du survol de l’élément auquel est attaché le le ::after
}

element:not(:hover) {
    // ici le CSS pour modifier l’élément quand il n’est pas survolé (utile dans certains cas).
}

Ou encore, plus compliqué :

element:invalid:hover::after {
    // le CSS pour un ::after attaché à un formulaire invalide lors du survol
}

Enfin un petit mot concernant la spécificité des pseudo-classes et pseudo-sélecteurs (voir la spécificité des sélecteurs CSS : là c’est très simple car les pseudo-classes ont la même spécificité que les classes normales et les pseudo-éléments ont la même spécificité que les éléments normaux.

Autrement, les possibilités apportées par ces choses sont énormes, c’est à vous d’étudier ça maintenant !