::first-letter (:first-letter)

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

Sumário

O ::first-letter CSS pseudo-elemento que seleciona a primeira letra da primeira linha de um bloco, se nçao for procedido por qual outro conteúdo (como imagens ou tableas embutidas/inline table) 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.

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.

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

/* 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

Especificações Status Comentários
CSS Pseudo-Elements Level 4
The definition of '::first-letter' in that specification.
Rascunho atual Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido, opacity e box-shadow.
CSS Text Decoration Module Level 3
The definition of 'text-shadow with ::first-letter' in that specification.
Candidata a Recomendação Permitido uso de text-shadow com ::first-letter.
Selectors Level 3
The definition of '::first-letter' in that specification.
Recomendação Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandês IJ). A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida.
CSS Level 2 (Revision 1)
The definition of '::first-letter' in that specification.
Recomendação Sem mudanças significativas, apesar que CSS nível 2 continuar aceitando apenas um dois-pontos.
CSS Level 1
The definition of '::first-letter' in that specification.
Recomendação Definição inicial de um dois-pontos.

Compatibilidade de Navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!
Caracteristicas Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte Básico 1.0 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85)
Velha sintaxe de um dois-pontos (:first-line) 1.0 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85)
Suporte ao dígrafo Holandês IJ Não suportado Não suportado bug 92176  Não suportado Não suportado Não suportado
Caracteristicas Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte Básico ? 1.0 (1) Não suportado ? ?
Velha sintaxe um dois-pontos (:first-line) ? 1.0 (1) ? ? ?
Suporte ao dígrafo holandês IJ ? Não suportado ? ? ?

Veja também