Télécharger le PDF du cours
Les pseudo-éléments ont une syntaxe particulière puisqu’il faudra utiliser un double deux-points :: entre le sélecteur élément et le mot clef désignant la partie de l’élément qui va être ciblé.
Il existe aujourd’hui 4 pseudo-éléments qui sont des recommandations du W3C :
::first-letter;::first-line;::before;::after.
Il existe également un cinquième pseudo-élément ::selection qu’il convient de connaitre car celui-ci devait faire partie des recommandations du CSS3 puis a finalement été abandonné et est de nouveau candidat aujourd’hui.
Insérer du contenu avant ou après le contenu d’un élément HTML
Les pseudo-éléments ::before et ::after vont nous permettre respectivement de cibler l’emplacement avant et après le contenu d’un élément HTML.
Dans l’immense majorité des cas nous allons utiliser ces pseudo-éléments de concert avec la propriété CSS content pour ajouter du texte avant ou après le contenu de l’élément.
Le pseudo-élément ::after va également nous permettre de réaliser le clearfix CSS pour qu’un élément parent contienne ses enfants flottants. En effet, en appliquant ::after à un élément contenant des éléments flottants, on va créer un pseudo-élément qui sera le dernier enfant du parent.
Il suffit ensuite d’appliquer un clear à ce pseudo élément tout en lui attribuant une boite de contenu avec content et en lui définissant un type d’affichage avec display.
See the Pen Cours HTML CSS 10.3.1 by Pierre (@pierregiraud) on CodePen.
Sélectionner la première lettre d’un élément en CSS
Le pseudo-élément ::first-letter va nous permettre de sélectionner uniquement la première lettre du contenu d’éléments HTML.
Nous allons ensuite pouvoir appliquer cette lettre toutes sortes de mise en forme. Par exemple, pour sélectionner la première lettre de tous les paragraphes d’une page, nous utiliserons le sélecteur CSS p::first-letter.
See the Pen Cours HTML CSS 10.3.2 by Pierre (@pierregiraud) on CodePen.
Sélectionner la première ligne d’un élément en CSS
De manière analogue à ::first-letter, nous allons pouvoir sélectionner uniquement la première ligne d’un élément HTML grâce au pseudo-élément ::first-line pour lui appliquer des styles.
Attention, la mise en forme va ici être dépendante de l’écran de chacun de vos visiteurs puisque la « première ligne » correspond ici à la première ligne dans le rendu visuel de la page de vos visiteurs.
Ainsi, pour sélectionner la première ligne de tous les paragraphes de notre page nous utiliserons le sélecteur CSS p::first-line.
See the Pen Cours HTML CSS 10.3.3 by Pierre (@pierregiraud) on CodePen.
Cibler la partie d’un élément déjà sélectionnée par l’utilisateur
Finalement, nous allons pouvoir appliquer des styles particuliers à certaines parties de nos éléments HTML en fonction de ce qui est déjà présélectionné par l’utilisateur grâce au pseudo-élément ::selection.
Les styles n’apparaitront que sur la partie de l’élément sélectionnée par un utilisateur. Pour sélectionner et appliquer des mises en forme particulières à la partie sélectionnée de tous les paragraphes d’une page, nous utiliserons donc le sélecteur CSS p::selection.
Attention toutefois à la compatibilité et à l’utilisation de ce sélecteur : celui-ci devait être intégré à la sortie du CSS3 mais a finalement été abandonné. Il fera normalement parti des recommandations pour le CSS4.
Je vous en parle ici car le fait que ce pseudo-élément devait faire partie des recommandations du CSS3 fait que la plupart des navigateurs le supportent déjà bien.
See the Pen Cours HTML CSS 10.3.4 by Pierre (@pierregiraud) on CodePen.
