CSS: la primera letra no funciona

78

Estoy tratando de aplicar estilos CSS a algunos fragmentos de HTML que se generaron a partir de un documento de Microsoft Word. El HTML generado por Word es bastante atroz e incluye muchos estilos en línea. Es algo parecido a esto:

<html>
    <head></head>
    <body>
        <center>
            <p class=MsoNormal><b style='mso-bidi-font-weight:normal'><span
               style='font-size:12.0pt;line-height:115%;font-family:"Times New Roman"'>Title text goes here<o:p></o:p></span></b></p>

            <p class=MsoNormal style='margin-left:18.0pt;line-height:150%'><span
                style='font-size:12.0pt;line-height:150%;font-family:"Times New Roman"'>Content text goes here.<o:p></o:p></span></p>
    </body>
</html>

... y muy simplemente, me gustaría darle estilo a la primera letra de la sección del título. Solo necesita ser más grande y tener una fuente diferente. Para hacer esto, estoy tratando de usar el :first-letterselector, con algo como:

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

Pero no parece estar funcionando. Aquí hay un violín que demuestra esto:

http://jsfiddle.net/KvGr2/

¿Alguna idea de qué está mal / cómo hacer que la primera letra de la sección del título tenga el estilo correcto? Puedo hacer cambios menores en el marcado (como agregar un div contenedor alrededor de las cosas), aunque no sin cierta dificultad.

html css aroth
fuente

Respuestas:

200

::first-letterno funciona en elementos en línea como a span. ::first-letterfunciona en elementos de bloque como un párrafo, título de tabla, celda de tabla, elemento de lista o aquellos con su displaypropiedad establecida en inline-block.

Por lo tanto, es mejor aplicar ::first-lettera a en plugar de a span.

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

o si quieres un ::first-letterselector en un span, escríbelo así:

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

MDN proporciona la justificación de este comportamiento no obvio:

El ::first-letterpseudoelemento CSS selecciona la primera letra de la primera línea de un bloque, si no está precedida por ningún otro contenido (como imágenes o tablas en línea) en su línea.

...

Una primera línea sólo tiene sentido en una caja de bloque-contenedor, por lo tanto, el ::first-letterpseudo-elemento tiene solamente un efecto en elementos con un displayvalor de block, inline-block, table-cell, list-itemo table-caption. En todos los demás casos, ::first-letterno tiene ningún efecto.

Otro caso extraño (aparte de no trabajar en elementos en línea) es que si usa :beforeel :first-letterse aplicará al anterior, no a la primera letra real, ver codepen

Ejemplos

Referencias

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

sandeep
fuente
Gracias por esto. Una cosa extraña que he notado: ¿el signo% también cambia de tamaño? jsfiddle.net/iamkeir/KvGr2/76
iamkeir
2
+1 Gracias por evitarme más molestias. Tengo que pensar que es bastante común querer usar un spanelemento, así que me sorprende que no funcione.
Yuck
15

Puede obtener el comportamiento deseado estableciendo la propiedad de visualización del intervalo en inline-block:

.heading span {
  display: inline-block;
}

.heading span:first-letter {
  color: red;
}
<div class="heading">
  <span>An</span>
  <span>Interesting</span>
  <span>Heading</span>
</div>
Expandir fragmento

Dovev Hefetz
fuente
cómo hacerlo si mi texto comienza con símbolos. <div>! Sesión vencida </div>
gauti
8

Esto se debe a que :first-lettersolo funciona en elementos de bloque / bloque en línea. SPANes un elemento en línea.

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

El pseudo-elemento: first-letter se utiliza principalmente para crear efectos tipográficos comunes como letras mayúsculas. Este pseudoelemento representa el primer carácter de la primera línea de texto formateada en un elemento a nivel de bloque, un bloque en línea, un título de tabla, una celda de tabla o un elemento de lista.

Ofer Zelig
fuente