El ::first-linepseudoelemento sirve para aplicar estilos a la primera línea de un elemento. Imagínese un párrafo que tiene varias líneas (¡como este!). ::first-linele permite diseñar esa primera línea de texto. Puede usarlo para agrandarlo o configurarlo en versalitas como una opción estilística. La cantidad de texto a la que se dirige este pseudoelemento depende de varios factores, como la longitud de la línea, el ancho de la ventana gráfica, el tamaño de fuente, el espaciado entre letras y el espaciado entre palabras. Tan pronto como se salte la línea, el texto posterior ya no estará seleccionado. Tenga en cuenta que aquí no se selecciona ningún elemento DOM real (por lo tanto, elemento "pseudo").
Esta pseudo-elemento sólo funciona en elementos en bloque (cuando displayestá ajustado a block, inline-block, table-caption, table-cell). Si se establece en un elemento en línea, no sucede nada, incluso si ese elemento en línea tiene un salto de línea dentro de él.
También tenga en cuenta que no todas las propiedades se pueden utilizar en un conjunto de reglas que contenga ::first-line. Principalmente:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )La especificación oficial de CSS le dice a los agentes de usuario que pueden permitir otras propiedades si así lo desean:
Las AU también pueden aplicar otras propiedades.
Una palabra sobre la especificidad
La siguiente demostración muestra cómo ::first-linees capaz de anular cualquier tipo de especificidad, incluso !important.
- El primer párrafo se establece en gris a través de un selector de etiquetas
- El segundo párrafo se establece en gris a través de un selector de clase
- El tercer párrafo se establece en gris a través de un selector de ID
- El cuarto párrafo se establece en gris a través de una fiesta importante.
Esto se debe a que el pseudo-elemento se trata como un elemento secundario, no solo como una parte del elemento principal. Entonces, las reglas que le aplicas son solo para él, las reglas principales pueden caer en cascada.
Además, intente cambiar el tamaño de su navegador para ver cómo se comporta el pseudo-elemento cuando cambia el ancho de la ventana gráfica.
No hay: last-line o: nth-line, aunque eso sería genial.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | sí | sí | 3.5+ (antiguo) 9+ | 5.5+ (antiguo) 9+ | sí | sí |
Dado que ::first-linees un pseudo-elemento, debe estar precedido por dos dos puntos como se especifica en CSS2.1. Sin embargo, algunos navegadores solo admiten la sintaxis de dos puntos (Internet Explorer 5.5 - 9 y Opera 3.5 - 9).