::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.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::first-letter
Support for the Dutch digraph IJ
Support on SVG <text> element

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Uses a non-standard name.
Has more compatibility info.

Veja também