Les pseudo-éléments ::first-letter et ::first-line.
Résumé des caractéristiques du sélecteur ::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 si la largeur de la
fenêtre du navigateur change ou si la taille des caractères est modifiée.
Toutes les propriétés ne peuvent pas être appliquées à ces deux pseudo-éléments. De façon générale, disons que les
propriétés qui s'appliquent aux éléments inline sont acceptées, ce qui inclut notamment :
- La stylisation des caractères (police, taille, gras, autres attributs, etc).
- La couleur et l'opacité.
- Les propriétés concernant l'arrière-plan.
Les deux pseudo-éléments ::first-letter et ::first-line ne concernent que les éléments du type bloc.
Il ne sont pas applicables sur les éléments inline comme par exemple les liens (balises a).
Cas particulier de certains caractères avec le pseudo-élément ::first-letter.
Si le texte de l'élément commence par une balise br, ::first-letter et ::first-line sont vides.
D'autre part, certains caractères ne sont pas pris en compte pour déterminer ce qui est la première lettre : les parenthèses,
les signes de ponctuation, etc.
Ces caractères se voient appliquer la mise en forme définie par ::first-letter, de même que le caractère qui les suit.
Mais malheureusement tous les navigateurs ne suivent pas les mêmes règles. Les échantillons ci-dessous vous donneront une idée de
ce que fait votre navigateur.
- Espace. C'est logique puisque l'espace en début d'un texte n'est même pas affiché par HTML.
Notez que l'espace insécable
est considéré comme une lettre normale. - !Point d'exclamation.
- ?Point d'interrogation.
- "Guillemet double.
- #Dièse.
- $Dollar.
- %Pourcentage.
- &Et commercial (perluète).
- 'Apostrophe.
- (Parenthèse ouvrante ou fermante, mais il peu probable que le contenu de l'élément commence par une parenthèse fermante.
- [Crochet ouvrant ou fermant.
- {Accolade ouvrante ou fermante.
- *Astérisque, signe de multiplication.
- +Plus, signe d'addition.
- -Tiret, signe de soustraction.
- /Slash, barre oblique, signe de division.
- ,Signes de ponctuation : virgule, point, point-virgule, deux-points.
- =Signes inférieur, supérieur, ou égal.
- _Underscore (ou blanc souligné).
- ^Accent circonflexe.
- |Barre verticale (pipe).
- #####Caractères répétés.
Tapez un ou plusieurs caractères ici
et voyez comment ils sont considérés par le pseudo-élément ::first-letter.
?Test
Les pseudo-éléments ::prefix et ::suffix.
Pour formater différemment les caractères de ponctuation qui peuvent précéder la première lettre ou qui peuvent la suivre, la norme
prévoit les pseudo-éléments ::prefix et ::suffix. Ceux-ci sont des enfants de ::first-letter : ils
s'utilisent en conjonction avec ::first-letter mais ils sont encore peu reconnus par les navigateurs (2025).
...::first-letter::prefix {
...
}
Exemples.
Combinaison des sélecteurs, attention à l'espace.
#exemple1, sans balise intermédiaire.
Ce texte est le contenu d'une balise p incluse dans le bloc #exemple1.
En examinant le code CSS, vous comprendrez pourquoi tous les paragraphes de ce bloc #exemple1 n'ont pas
tous le même formatage.
Notez l'espace entre #exemple1 et ::first-line dans le sélecteur de la première règle.
Ce qui se traduit par "la première ligne de tous les éléments enfants de #exemple1" sont en rouge.
Cet espace ne figure pas dans la deuxième règle. Cette dernière concerne donc uniquement la première ligne de l'élément
#exemple1, qui doit être en bleu.
Formatage de lettrines.
Le code CSS de ce deuxième exemple, tel qu'il est écrit, concerne la première lettre de chacun des éléments enfants
du bloc #exemple2.
Comme on peut le voir, chacun des paragraphes de ce bloc comporte effectivement une lettrine.
Habituellement, lorsque des lettrines sont utilisées, la ligne sur laquelle se trouve la lettrine est passée
en petites capitales. C'est ce qui a été fait ici avec le pseudo-élément ::first-line.
En modifiant la largeur de la fenêtre de votre navigateur, vous pourrez constater que ce sélecteur est bien dynamique.
Remarque : les boutons (balises input) ne sont visiblement pas sélectionnés par ::first-letter,
mais le sont pas contre avec ::first-line.
Compatibilité des navigateurs.
Ces deux sélecteurs sont bien traités par les navigateurs actuels.
::first-letter::first-line Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Chrome
Edge
Firefox
Opéra
Safari
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique des sélecteurs ::first-letter et ::first-line.
Rappelons que dans les toutes premières versions de CSS, les pseudo-éléments étaient, comme les pseudo-classes, préfixés par un seul caractère deux-points.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Définition inttiale des pseudo-éléments:first-lineet:first-letter(avec un seul caractère deux-points dans cette première version).
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Pas de changement dans la définition des pseudo-éléments:first-lineet:first-letter.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Sélecteurs - Niveau 3
Depuis cette version, les pseudo-éléments commencent par un double caractère deux-points, pour les distinguer des pseudo-classes.03 Août 1999Document de travail.
13 Novembre 2001Candidat à la recommandation.15 Décembre 2009Proposé à la recommandation.29 Septembre 2011Recommandation. -
Module CSS - Pseudo-éléments - Niveau 4
Pas de changement concernant les pseudo-éléments::fist-letteret::fist-line.15 Janvier 2015Document de travail.
Liste des pseudo-éléments.
Ces termes sont définis dans la spécification du W3C "module CSS - Pseudo-éléments" (CSS Pseudo-Elements Module ).
Sélecteurs :
placeholder).