CSS ::first-letter Pseudo-elemento

O pseudo-elemento ::first-letter aplica estilos à primeira letra da primeira linha em um contêiner de nível de bloco. É mais comumente usado para criar capitulares e outros efeitos tipográficos de letra inicial, como as grandes letras ornamentadas que abrem um capítulo em um livro impresso.

O pseudo-elemento só tem efeito quando o display do elemento é block, inline-block, list-item, table-cell ou table-caption. Não tem efeito em elementos inline como <span> ou imagens, pois esses não iniciam uma nova linha.

Quando uma pontuação (como aspas, colchetes ou travessão) precede ou segue imediatamente a primeira letra, essa pontuação é incluída na correspondência junto com a letra. O pseudo-elemento tem como alvo a primeira unidade tipográfica de letra, portanto um símbolo ou dígito inicial é estilizado junto com a letra que o segue.

Informação

O CSS3 introduziu a sintaxe de dois pontos duplos (::first-letter) para distinguir pseudo-elementos de pseudo-classes. A forma mais antiga com um único dois pontos (:first-letter) ainda é aceita pelos navegadores para compatibilidade retroativa, mas a forma com dois pontos duplos é preferida no código moderno.

Quando usar

Use ::first-letter quando quiser:

Criar uma capitular — ampliar e flutuar a letra inicial de um artigo ou capítulo.
Aplicar uma cor, fonte ou peso distinto ao caractere inicial de um título ou parágrafo.
Reproduzir tipografia no estilo impresso na web sem precisar envolver o primeiro caractere em marcação extra.

Como o efeito é puramente visual, mantém seu HTML limpo: não é necessário adicionar um <span class="first"> ao redor da letra.

Propriedades permitidas

Aqui estão as propriedades CSS que podem ser usadas com o pseudo-elemento ::first-letter:

Propriedades de fonte: 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 e font-family.

Propriedades de fundo: background, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode, background-color, background-image e background-clip.

Propriedades de margem: margin, margin-top, margin-right, margin-bottom, margin-left.

Propriedades de preenchimento: padding, padding-top, padding-right, padding-bottom, padding-left.

Propriedades de borda: abreviações, border-style, border-color, border-width, border-radius, border-image, formas longas.

A propriedade color.

As propriedades text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (quando apropriado), text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (apenas float: none;).

Versão

Selectors Level 3

CSS Level 2 (Revision 1)

CSS Level 1

Sintaxe

Exemplo de sintaxe CSS ::first-letter

::first-letter {
  css declarations;
}

Exemplo do pseudo-elemento ::first-letter:

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

Experimente Você Mesmo »

Resultado

A primeira letra do parágrafo é renderizada em 35px e em azul, enquanto o restante do texto mantém seu tamanho e cor padrão.

Exemplo do pseudo-elemento ::first-letter com sinal de pontuação e dígito:

No exemplo a seguir, o primeiro parágrafo começa com um travessão e o segundo com um dígito. Observe como o travessão inicial é estilizado junto com a primeira letra, enquanto um dígito inicial é estilizado sozinho como o primeiro caractere da linha.

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

Experimente Você Mesmo »

Exemplo de capitular:

Um uso clássico de ::first-letter é a capitular, onde a letra inicial é ampliada e flutuada para que as linhas seguintes se envolvam ao redor dela. Combine um font-size grande, float: left e um pouco de padding para obter o efeito.

<!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 — estiliza toda a primeira linha em vez de apenas a primeira letra.
CSS float — necessário para envolver texto ao redor de uma capitular.
CSS text-transform — combine com ::first-letter para colocar em maiúscula o caractere inicial.

Prática

Como funciona o seletor de pseudo-elemento CSS ::first-letter?

Ele seleciona e estiliza a primeira letra de cada parágrafo.Ele seleciona e estiliza a última letra de cada parágrafo.Pode ser usado com elementos de nível de bloco e células de tabela.Pode ser usado para selecionar e estilizar a primeira letra de cada palavra em um parágrafo.