CSS :première-lettre ne fonctionne pas

Question

Je essaie d'appliquer des styles CSS à certaines fragments HTML qui ont été générés à partir d'un document Word Microsoft. L'HTML que Word a généré est assez atroce, et comprend beaucoup de styles en ligne. Ça ressemble à ceci :

...et simplement, j'aimerais styliser la première lettre de la section du titre. Elle doit juste être plus grande et dans une police différente. Pour cela, j'essaie d'utiliser le sélecteur :first-letter, avec quelque chose qui ressemble à ceci :

p b span:first-letter {
    font-size: 500px !important;
}

Mais cela ne semble pas fonctionner. Voici un exemple illustrant cela :

http://jsfiddle.net/KvGr2/

Des idées sur ce qui ne va pas/comment styliser correctement la première lettre de la section du titre ? Je peux apporter des modifications mineures au balisage (comme ajouter un div conteneur autour des éléments), bien que pas sans quelques difficultés.

Answer 1

::first-letter ne fonctionne pas sur des éléments inline tels qu'un span. ::first-letter fonctionne sur des éléments block tels qu'un paragraphe, une légende de tableau, une cellule de tableau, un élément de liste, ou ceux ayant leur propriété display définie sur inline-block.

Il est donc préférable d'appliquer ::first-letter à un élément p au lieu d'un span.

p::first-letter {font-size: 500px;}

ou si vous voulez un sélecteur ::first-letter dans un span alors écrivez-le comme ceci :

p b span::first-letter {font-size: 500px !important;}
span {display:block}

MDN fournit la justification de ce comportement non évident :

Le pseudo-élément CSS ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un autre contenu (tel que des images ou des tableaux inline) sur sa ligne.

...

Une première ligne a du sens uniquement dans une boîte de type block-container, par conséquent le pseudo-élément ::first-letter n'a d'effet que sur les éléments avec une valeur de display de block, inline-block, table-cell, list-item ou table-caption. Dans tous les autres cas, ::first-letter n'a aucun effet.

Un autre cas étrange (en dehors de ne pas fonctionner sur des éléments inline) est si vous utilisez :before le ::first-letter s'appliquera au before et non à la première lettre réelle voir codepen

Exemples

• http://jsfiddle.net/sandeep/KvGr2/9/
• http://krijnhoetmer.nl/stuff/css/first-letter-inline-block/

Références

https://developer.mozilla.org/fr/docs/Web/CSS/::first-letter http://reference.sitepoint.com/css/pseudoelement-firstletter

Answer 2

Vous pouvez obtenir le comportement souhaité en définissant la propriété d'affichage de la balise span sur inline-block:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}

  An
  Interesting
  Heading

Answer 3

Cela est dû au fait que :first-letter ne fonctionne que sur les éléments blocs / en ligne. SPAN est un élément en ligne.

Extrait de http://reference.sitepoint.com/css/pseudoelement-firstletter:

Le pseudo-élément :first-letter est principalement utilisé pour créer des effets typographiques courants tels que les lettrines. Ce pseudo-élément représente le premier caractère de la première ligne formatée du texte dans un élément de niveau bloc, un élément en ligne, une légende de tableau, une cellule de tableau ou un élément de liste.