::first-letter (:first-letter)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Sumário

O pseudo-elemento CSS ::first-letter seleciona a primeira letra da primeira linha de um bloco, desde que não seja precedida por outro conteúdo (como imagens ou tabelas embutidas/inline) na mesma linha.

A primeira letra de um elemento não é necessariamente uma identificação trivial:

  • Pontuação, que é qualquer caractere definido em Unicode de abertura (Ps), de fechamento (Pe), aspa inicial (Pi), aspa final (Pf) e outras pontuações (Po), precedendo ou imediatamente após a primeira letra também é correspondida por esse pseudo-elemento.
  • Da mesma forma, alguns idiomas têm dígitos que são sempre escritos em maiúsculas, como o IJ em holandês. Nesses casos raros, as duas letras do dígrafo devem corresponder ao pseudo-elemento ::first-letter. (Isso é pouco suportado pelos navegadores, verifique a tabela de compatibilidade).
  • Finalmente, uma combinação do pseudoelemento ::before e a propriedade content podem injetar algum texto no início do elemento. Nesse caso, ::first-letter corresponderá à primeira letra deste conteúdo gerado.

Uma primeira linha tem apenas significado em uma caixa de contêiner de bloco; portanto, o pseudo-elemento ::first-letter apenas afeta os elementos com um valor de display de block, inline-block, table-cell, list-item ou table-caption. Em todos os outros casos, ::first-letter não tem efeito.

Somente um pequeno subconjunto de todas as propriedades CSS pode ser usado dentro de um bloco de declaração de um conjunto de regras CSS que contém um seletor usando o pseudoelemento ::first-letter:

Como toda essa lista será estendida no futuro, é recomendado que você não use qualquer propriedade dentro da declaração do bloco, afim de manter o CSS a qualquer prova.

Nota: No CSS 2, os pseudoelementos eram prefixados com um caractere de dois pontos (:). Como as pseudo-classes também estavam seguindo a mesma convenção, elas eram indistinguíveis. Para resolver isso, o CSS 2.1 mudou a convenção para pseudoelementos. Agora, um pseudoelemento é prefixado com dois caracteres de dois pontos (::) e uma pseudo-classe ainda é prefixado com um único dois pontos (:).

Exemplo de pseudoclasse: .classedoelemento:hover { ... }

Exemplo de pesudoelemento: > .classedoelemento::first-letter { ... }

Como vários navegadores já implementaram a versão CSS 2 em uma versão de lançamento, todos os navegadores que suportam a sintaxe de dois pontos também suportam a antiga sintaxe de dois pontos.

Aviso: Mas isso pode mudar, portanto use SEMPRE :: para pseudolementos

...a não se que você precise muito que seu código seja compatível com Internet Explore 8, então use um carectere de dois pontos.

Exemplo

css
/* Fazendo odas as letras dos paragrados maior e vermelha */

p::first-letter {
  /* Use :first-letter if você precise muito de compatibilidade com IE 8 */
  color: red;
  font-size: 130%;
}

Especificações

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também