[CSS] Pseudo-éléments & pseudo-classes
Thursday 11 February 2016 à 05:33En 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 !
