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 ::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
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 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 :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que ::first-letter.
Les spécifications CSS éditées par le W3C sont organisées en modules. ::first-letter fait partie du Module CSS - Pseudo-éléments (CSS Pseudo-Elements Module ). Les définitions suivantes sont également décrites dans ce même module.
Sélecteurs.
file.