Pseudo-elemento CSS ::first-line

El pseudo-elemento ::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.

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

El pseudo-elemento ::first-letter hereda solo las propiedades aplicables a ::first-line. Para todas las demás propiedades, hereda del elemento padre. Si se utilizan ambos pseudo-elementos, los estilos definidos en ::first-letter anulan los heredados de ::first-line.

El pseudo-elemento ::first-line también se puede escribir con un solo dos puntos (: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 pseudo-elemento ::first-line acepta solo algunas propiedades CSS. Veámoslas:

Todas las propiedades relacionadas con la fuente: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch y font-family.
Todas las propiedades relacionadas con el fondo: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment y background-blend-mode.
Algunas propiedades utilizadas para dar estilo al texto: text-shadow, text-decoration, text-decoration-color, text-decoration-line y text-decoration-style.
La propiedad color de CSS.
word-spacing, line-height, letter-spacing, text-transform y white-space.

Especificidad y herencia del pseudo-elemento ::first-line

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

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

Sintaxis

Ejemplo de sintaxis CSS ::first-line

css

::first-line {
  css declarations;
}

Ejemplo del pseudo-elemento ::first-line:

Ejemplo de código CSS ::first-line

html

<!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>

Try it Yourself »

Resultado

Propiedad CSS ::first-line

Práctica

¿A qué puede aplicarse el selector de pseudo-elemento ::first-line en CSS?

Elementos de nivel de bloqueElementos en líneaElementos con pseudo-elementos ::before y ::afterElementos configurados para flotar

Pseudo-elemento CSS ::first-line ​

Versión ​

Propiedades permitidas ​

Especificidad y herencia del pseudo-elemento ::first-line ​

Sintaxis ​

Ejemplo del pseudo-elemento ::first-line: ​

Resultado ​

Práctica ​