::first-line (:first-line)

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

El Pseudoelemento ::first-line aplica estilos a la primera línea de un elemento de bloque. Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el tamaño del elemento, el tamaño del documento y la fuente del texto.

/* Selecciona la primera línea de un <p> */
p::first-line {
  color: red;
}

CSS3 introdujo la notación ::first-line (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :first-line, añadido en CSS2.

Propiedades permitidas

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-line:

Sintaxis

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

Example

HTML

<p>Los estilos sólo se aplicarán en la primera línea de este párrafo.
Posteriormente, todo el texto tendrá el estilo normal.
¿Ves?</p>

<span>La primera línea de este elemento no recibe ningún estilo 
especial, porque no es un elemento de bloque.</span>

CSS

::first-line {
  color: blue;
  text-transform: uppercase;


  /* ADVERTENCIA: NO USES ESTOS*/
  /* Muchas propiedades son inválidas en pseudoelementos ::first-line */
  margin-left: 20px;
  text-indent: 20px;
}

Resultado

Especificaciones

Especificación Estatus Comentario
CSS Pseudo-Elements Level 4
La definición de '::first-line' en esta especificación.
Working Draft

Defina más estrictamente dónde ::first-letter puede ocurrir. Generaliza propiedades permitidas. Define la herencia de ::first-letter.

CSS Text Decoration Module Level 3
La definición de 'text-shadow with ::first-line' en esta especificación.
Candidate Recommendation Permite el uso de text-shadow con ::first-letter.
Selectors Level 3
La definición de '::first-line' en esta especificación.
Recommendation Introducción de la sintexis de doble dos puntos.
CSS Level 2 (Revision 1)
La definición de '::first-line' en esta especificación.
Recommendation Sin cambios.
CSS Level 1
La definición de '::first-line' en esta especificación.
Recommendation Definición inicial, uso de la sintaxis de doble dos puntos.
Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
::first-lineChrome Soporte completo 1
Notas
Soporte completo 1
Notas
Notas Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Soporte completo 1
Notas Nombre alternativo
Notas Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Nombre alternativo Usa un nombre no estandar : :first-line
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-line
Firefox Soporte completo 1
Soporte completo 1
Soporte completo 1
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-line
IE Soporte completo 9
Soporte completo 9
Soporte completo 5.5
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-line
Opera Soporte completo 7
Notas
Soporte completo 7
Notas
Notas From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Soporte completo 3.5
Notas Nombre alternativo
Notas From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Nombre alternativo Usa un nombre no estandar : :first-line
Safari Soporte completo 1
Notas
Soporte completo 1
Notas
Notas The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Soporte completo 1
Notas Nombre alternativo
Notas The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Nombre alternativo Usa un nombre no estandar : :first-line
WebView Android Soporte completo ≤37
Notas
Soporte completo ≤37
Notas
Notas Before WebView 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Soporte completo ≤37
Notas Nombre alternativo
Notas Before WebView 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Nombre alternativo Usa un nombre no estandar : :first-line
Chrome Android Soporte completo 18
Notas
Soporte completo 18
Notas
Notas Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Soporte completo 18
Notas Nombre alternativo
Notas Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Nombre alternativo Usa un nombre no estandar : :first-line
Firefox Android Soporte completo 4
Soporte completo 4
Soporte completo 4
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : :first-line
Opera Android Soporte completo 10.1
Notas
Soporte completo 10.1
Notas
Notas From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Soporte completo 10.1
Notas Nombre alternativo
Notas From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Nombre alternativo Usa un nombre no estandar : :first-line
Safari iOS Soporte completo 1
Notas
Soporte completo 1
Notas
Notas The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Soporte completo 1
Notas Nombre alternativo
Notas The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Nombre alternativo Usa un nombre no estandar : :first-line
Samsung Internet Android Soporte completo 1.0
Notas
Soporte completo 1.0
Notas
Notas Before Samsung Internet 8.0, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Soporte completo 1.0
Notas Nombre alternativo
Notas Before Samsung Internet 8.0, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Nombre alternativo Usa un nombre no estandar : :first-line

Leyenda

Soporte completo  
Soporte completo
Ver notas de implementación.
Ver notas de implementación.
Usa un nombre no estandar.
Usa un nombre no estandar.

Ver También