::first-letteres un pseudo elemento que le permite diseñar la primera letra en un elemento, sin necesidad de pegar una etiqueta alrededor de esa primera letra en su HTML. Si bien no se agregan etiquetas al DOM, es como si la primera letra objetivo estuviera incluida en una etiqueta. Puede diseñar esa primera letra como lo haría con un elemento real con:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
El resultado es como si tuviera un elemento falso alrededor de la primera letra:
The first letter is bold and red.
La primera letra es roja y en negrita
- El pseudo elemento solo funciona si el elemento padre es un cuadro contenedor de bloque (en otras palabras, no funciona en la primera letra de los
display: inline;elementos). - Si tiene tanto un
::first-lettercomo::first-lineen un elemento, la primera letra heredará de los estilos de la primera línea, pero los estilos en el::first-letterse sobrescribirán cuando los estilos entren en conflicto. - Si genera contenido con
::before, la primera letra o el carácter de puntuación, ya sea que forme parte del nodo de texto original o se haya creado con contenido generado, será el objetivo.
Más información
- Cuando se usa para
p:first-of-typeletras mayúsculas, use junto con para que no todas las primeras letras tengan estilo - Lápiz de ejemplo: con contenido generado
- Wiki del W3C
- Módulo de selectores W3C CSS3
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 9 | 3,5 | 9 | 12 | 5.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Nota: Para Internet Explorer 8 y versiones posteriores, utilice dos puntos simples en :first-letterlugar de la notación de dos puntos.