CSS ::first-letter Pseudoelemento

El pseudoelemento ::first-letter aplica estilos a la primera letra de la primera línea en un contenedor de nivel de bloque. Se usa más comúnmente para crear capitulares y otros efectos tipográficos de letra inicial, como las grandes letras ornamentadas que abren un capítulo en un libro impreso.

El pseudoelemento solo tiene efecto cuando el display del elemento es block, inline-block, list-item, table-cell o table-caption. No tiene efecto en elementos en línea como <span> o imágenes, ya que estos no inician una nueva línea.

Cuando la puntuación (como comillas, corchetes o un guion) precede o sigue inmediatamente a la primera letra, esa puntuación se incluye en la coincidencia junto con la letra. El pseudoelemento apunta a la primera unidad de letra tipográfica, por lo que un símbolo o dígito inicial se estiliza junto con la letra que lo sigue.

Información

CSS3 introdujo la sintaxis de doble dos puntos (::first-letter) para distinguir los pseudoelementos de las pseudoclases. La forma antigua con dos puntos simples (:first-letter) todavía es aceptada por los navegadores por compatibilidad con versiones anteriores, pero la forma de doble dos puntos es preferida en el código moderno.

Cuándo usarlo

Recurre a ::first-letter cuando quieras:

Crear una capitular — agrandar y flotar la letra inicial de un artículo o capítulo.
Aplicar un color, fuente o grosor distintivo al carácter inicial de un encabezado o párrafo.
Reproducir tipografía de estilo impreso en la web sin envolver el primer carácter en marcado adicional.

Dado que el efecto es puramente presentacional, mantiene tu HTML limpio: no es necesario agregar un <span class="first"> alrededor de la letra.

Propiedades permitidas

Aquí están las propiedades CSS que se pueden usar con el pseudoelemento ::first-letter:

Propiedades de fuente: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-weight, font-size, font-size-adjust, line-height y font-family.

Propiedades de fondo: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image y background-clip.

Propiedades de margen: margin, margin-top, margin-right, margin-bottom, margin-left.

Propiedades de relleno: padding, padding-top, padding-right, padding-bottom, padding-left.

Propiedades de borde: abreviaciones, border-style, border-color, border-width, border-radius, border-image, formas individuales.

La propiedad color.

Las propiedades text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (cuando corresponda), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (solo float: none;).

Versión

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Sintaxis

Ejemplo de sintaxis CSS ::first-letter

::first-letter {
  css declarations;
}

Ejemplo del pseudoelemento ::first-letter:

Ejemplo de código CSS ::first-letter

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La primera letra del párrafo se muestra a 35px y en azul, mientras que el resto del texto conserva su tamaño y color predeterminados.

Ejemplo del pseudoelemento ::first-letter con signo de puntuación y un dígito:

En el siguiente ejemplo, el primer párrafo comienza con un guion y el segundo con un dígito. Observa cómo el guion inicial se estiliza junto con la primera letra, mientras que un dígito inicial se estiliza por sí solo como el primer carácter de la línea.

Ejemplo de código ::first-letter

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 35px;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>::first-letter selector example</h2>
    <p>-Lorem ipsum is simply dummy text...</p>
    <p>1Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de una capitular:

Un uso clásico de ::first-letter es la capitular, donde la letra inicial se agranda y se flota para que las líneas siguientes se envuelvan a su alrededor. Combina un font-size grande, float: left y un poco de padding para lograr el efecto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-letter {
        font-size: 3em;
        font-weight: bold;
        color: #1c87c9;
        float: left;
        padding-right: 8px;
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <p>
      Drop caps draw the reader's eye to the start of a paragraph. They
      are a long-standing typographic tradition, and CSS lets you add them
      with no extra markup at all.
    </p>
  </body>
</html>

Recursos relacionados

CSS ::first-line — da estilo a toda la primera línea en lugar de solo la primera letra.
CSS float — necesario para envolver el texto alrededor de una capitular.
CSS text-transform — combínalo con ::first-letter para poner en mayúscula el carácter inicial.

Práctica

¿Cómo funciona el selector de pseudoelemento CSS ::first-letter?

Selecciona y da estilo a la primera letra de cada párrafo.Selecciona y da estilo a la última letra de cada párrafo.Se puede usar con elementos de nivel de bloque y celdas de tabla.Se puede usar para seleccionar y dar estilo a la primera letra de cada palabra en un párrafo.