Les pseudos-éléments en CSS

Les pseudos-éléments font rélérence à des parties de texte 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 paragraphe. Le nom des pseudo-éléments est précédé de deux-points ( : ).

Utilisé seul, le pseudo-élément s'applique à toutes les balises mais il est facile de combiner un sélecteur classique (une balise HTML) avec un pseudo-élément pour en limiter la portée :

:First-LetterDésigne la première lettre de tous les blocs de texte (titres H1 et autres, paragraphes...)
H1:First-LetterDésigne la première lettre des titres H1.
P:First-LetterDésigne la première lettre des paragraphes.

Attention ! Lorsque plusieurs pseudo-éléments s'appliquent aux mêmes éléments (ou lorsque ils sont définis de façon générale), il convient de respecter l'ordre suivant dans la déclaration des styles :

  1. :Link
  2. :Visited
  3. :Hover
  4. :Active

Interactions avec l'utilisateur.

  :Link Désigne les liens non encore visités.
  :Active Désigne le lien actif (celui qui vient d'être cliqué).
  :VisitedDésigne un lien déjà visité.
  :Focus Désigne l'élément sélectionné.
  :Hover Désigne l'élément sur lequel la souris est en train de passer.
::SelectionDésigne le texte sélectionné. Notez le double deux points.
::-Moz-SelectionDésigne le texte sélectionné. Notez le double deux points.
:RootDésigne l'élément racine. A priori, il s'agit toujours de HTML. Il y a certainement une subtilité que nous n'avons pas vue.

Eléments du contenu non identifiés par une balise.

  :First-Letter Désigne la première lettre de chaque bloc de texte.
  :First-Line Désigne la première ligne de chaque bloc de texte.
  :First-Child Désigne le premier enfant d'un élément.
:Last-Child Désigne le dernier enfant d'un élément.
  :Lang Désigne les éléments dans une langue spécifiée.
: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.
:Not( ) Opérateur de négation, à utiliser en complément d'une condition.
Exemple P:Not([Align=Center]) désigne tous les paragraphes qui ne sont pas centrés.

Insertion de contenu (propriété Content).

  :Before Désigne l'emplacement situé avant l'élément.
  :After Désigne l'emplacement situé après l'élément. Ces deux pseudo-éléments sont utilisés avec la propriété Content.

Mise en page (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.

Exemples.

:First-Letter {Font-Weight: Bold; Color: Blue;}
:First-Line {Font-Style: Italic;}

Sur cet exemple, les premières lettres de chaque bloc de texte sont en gras et en couleur bleu.

Les premières lignes de chaque bloc de texte sont italiques.

Ces styles s'appliquent à tous les blocs de texte (paragraphes, titres, etc...).

:Hover { Background-Color: Yellow; }

Les zones de saisie et les liens ci-dessous semblent s'activer (changement de la couleur du fond Background-Color) lorsque la souris les survole.

Lundi   Mardi   Mercredi

:Lang(fr) {Color: Blue ;}
:Lang(gb) (Color: Green ;}

Les textes en français sont affiché en bleu.

English texts are displayed in green color.

Pour que cela fonctionne, l'attribut Lang doit être utilisé par exemple avec la balise P comme ci-dessous :

<p Lang="fr">Texte en français.<p>

TD {Border:Solid 1pt Blue;}
TD:First-Child {Background-Color: DarkBlue;}
TR:First-Child TD {Background-Color: Blue;}
TR:First-Child TD:First-Child
    {Border: None;Background-Color: Transparent;}

La première ligne de déclaration ci-dessus précisent que les cellules (TD) sont encadrées ;
La deuxième ligne indiquent que les premières cellules sont en bleu foncé ;
La troisième ligne que les cellules de la première ligne (TR) sont en bleu ;
Enfin, la dernière déclaration indique que la première cellule de la première ligne n'est pas encadrée et a un fond transparent.
Tout ceci nous donne la présentation ci-dessous :

   
   
   
Pour toute utilisation des informations de cette page, reportez vous au copyright