W3docs
es
Iniciar sesión

Pseudoelemento CSS ::first-line

Usa el pseudoelemento CSS ::first-line para seleccionar y dar estilo a la primera línea de un contenedor de bloque. Lee sobre él y prueba ejemplos.

El pseudoelemento ::first-line aplica estilos a la primera línea de un contenedor de nivel de bloque. No selecciona elementos de nivel en línea, como imágenes o tablas en línea.

Se usa con más frecuencia para toques tipográficos que los periódicos y revistas aplican a la línea de apertura de un artículo — un color diferente, versalitas o espaciado entre letras adicional — sin envolver esa línea en marcado extra. Como la "primera línea" depende del ancho del elemento, el tamaño de fuente y el viewport del usuario, la parte que recibe el estilo es recalculada por el navegador a medida que cambia el diseño.

Solo un conjunto específico de propiedades CSS puede aplicarse a ::first-line. La lista completa se detalla en la sección Propiedades permitidas más abajo.

El pseudoelemento ::first-letter hereda solo las propiedades aplicables a ::first-line. Para todas las demás propiedades, hereda del elemento padre. Si se usan ambos pseudoelementos, los estilos definidos en ::first-letter reemplazan los heredados de ::first-line.

El pseudoelemento ::first-line también puede escribirse con dos puntos simples (:first-line), lo cual es compatible con todos los navegadores.

Versión

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Propiedades permitidas

El pseudoelemento ::first-line acepta solo algunas propiedades CSS. Veámoslas:

Especificidad y herencia del pseudoelemento ::first-line

El texto en la primera línea hereda solo las propiedades aplicables al pseudoelemento ::first-line. Para todas las demás propiedades, hereda del elemento padre. Por ejemplo, el pseudoelemento ::first-letter hereda los estilos aplicados por el pseudoelemento ::first-line.

El pseudoelemento ::first-line tiene mayor especificidad que el selector del elemento base, por lo que sus estilos reemplazan las declaraciones normales del elemento. Sin embargo, las reglas CSS !important estándar siguen aplicándose según las reglas normales de cascada.

Sintaxis

Ejemplo de sintaxis CSS ::first-line

::first-line {
  css declarations;
}

Ejemplo del pseudoelemento ::first-line:

Ejemplo de código CSS ::first-line

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>
Pruébalo tú mismo »

En este ejemplo, solo las palabras que caen en la primera línea renderizada del párrafo se vuelven azul claro y en mayúsculas. Redimensiona la ventana y la parte con estilo cambia automáticamente, porque ::first-line sigue la línea que el navegador realmente traza, no un número fijo de caracteres.

Resultado

Propiedad CSS ::first-line

Cosas a tener en cuenta

  • Solo responden los contenedores de nivel de bloque. Aplicar ::first-line a un elemento en línea (como un <span> o un <a> que no se haya convertido en display: block) no tiene efecto.
  • La línea es dinámica. No hay forma de apuntar a un número fijo de caracteres — si cambia el viewport, la fuente o el relleno, el navegador recalcula qué texto pertenece a la primera línea y lo vuelve a estilizar en consecuencia.
  • El soporte de propiedades está restringido. Las propiedades que afectan al diseño (como margin, padding, border o width) se ignoran en ::first-line. Usa solo las propiedades enumeradas en Propiedades permitidas.
  • El orden importa con ::first-letter. Cuando aplicas estilos a ambos, declára los de modo que el ganador deseado quede claro: los estilos de ::first-letter reemplazan las propiedades coincidentes heredadas de ::first-line. Para el estilo de capitular, consulta el pseudoelemento ::first-letter.

Práctica

Práctica
¿A qué puede aplicarse el selector del pseudoelemento ::first-line en CSS?
¿A qué puede aplicarse el selector del pseudoelemento ::first-line en CSS?
Was this page helpful?