Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Sélecteur CSS ::first-letter

Description des pseudo-éléments ::first-letter et ::first-line.

Le pseudo-élément ::first-letter désigne la première lettre d'un élément.
Le pseudo-élément ::first-line désigne la première ligne de texte de l'élément. Ce dernier est dynamique, c'est à dire qu'il est ré-évalué en permanence par exemple silver on change la largeur de la fenêtre du navigateur.

La présence ou l'absence d'espace avant le pseudo-élément est très importante.
Sans espace, #div1:first-line désigne la première ligne de texte directement écrite dans l'élément #div1.
Tandis que #div2 :first-line désigne la première ligne de tous les éléments enfants de l'élément #div2.

Exemple.

Cette ligne est écrite directement dans l'élément #exemple1, sans balise intermédiaire.

Ce texte est le contenu d'une balise p incluse dans l'élément #exemple1.

Notez l'espace dans le sélecteur de la première règle, alors qu'il n'y a pas d'espace dans la deuxième règle. Cela change tout : la première règle (lettrine) s'applique à la première lettre de tous les enfants du cadre. Tandis que la deuxième règle (ligne rouge) s'applique à la première ligne du seul élément désigné.

Compatibilité des navigateurs.

Ces deux sélecteurs sont bien traités par les navigateurs actuels. Voyez ci-dessous le tableau de compatibilité du pseudo-élément ::first-line.

Afficher les versions antérieures   Afficher la version à venir