Pseudoelemento CSS ::first-letter

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

El pseudoelemento ::first-letter no coincide con signos de puntuación que precedan o sigan inmediatamente a la primera letra. Solo se aplica a caracteres alfabéticos, no a números o símbolos.

INFO

La especificación CSS3 introdujo ::first-letter para distinguir las pseudo-clases de los pseudo-elementos.

Propiedades permitidas

Estas son 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: abreviaturas, border-style, border-color, border-width, border-radius, border-image, propiedades 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 de CSS ::first-letter

css

::first-letter {
  css declarations;
}

Ejemplo del pseudoelemento ::first-letter:

Ejemplo de código CSS ::first-letter

html

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

Try it Yourself »

Resultado

::first-letter example

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

Ejemplo de código ::first-letter

html

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

Try it Yourself »

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.

Pseudoelemento CSS ::first-letter ​

Propiedades permitidas ​

Versión ​

Sintaxis ​

Ejemplo del pseudoelemento ::first-letter: ​

Resultado ​

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

Práctica ​