Les pseudo-éléments CSS

Les pseudo-éléments CSS vont nous permettre de ne cibler qu’une partie d’un élément HTML pour lui appliquer des styles. Il convient de ne pas les confondre avec les pseudo-classes qui elles servent à cibler un élément selon son état.

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.

Support HTML pour utilisation des pseudo éléments CSS before et after

Exemple d'utilisation des pseudo éléments CSS before et after

On peut ajouter du contenu avant ou après un élément avec CSS content et les pseudo éléments after ou before

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.

Support HTML pour utilisation du pseudo élément CSS first-letter

Exemple d'utilisation des pseudo éléments CSS first-letter

On cible la premiètre lettre d'un élément avec le pseudo élément CSS 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.

Support HTML pour utilisation du pseudo élément CSS first-line

Exemple d'utilisation du pseudo élément first-line

On cible la première ligne de contenu d'un élément avec le pseudo élément CSS 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.

Support HTML pour utilisation du pseudo élément CSS selection

Exemple d'utilisation du pseudo élément selection en CSS

Résultat de l'utilisation du pseudo élément selection en CSS

See the Pen Cours HTML CSS 10.3.4 by Pierre (@pierregiraud) on CodePen.

Laisser un commentaire