::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 propriedadecontent
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
:
- Todas as propriedades de fonts :
font
,font-style
,font-feature-settings
,font-kerning
,font-language-override
,font-stretch
,font-synthesis
,font-variant
,font-variant-alternates
,font-variant-caps
,font-variant-east-asian
,font-variant-ligatures
,font-variant-numeric
,font-variant-position
,font-weight
,font-size
,font-size-adjust
,line-height
andfont-family
. - Todas as propriededas de background :
background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, andbackground-blend-mode
. - Todas as propriedades de margem:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
. - Todas as propriedades de "padding" (preenchimento):
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
. - Todas as bordas: the taquigraficas
border
,border-style
,border-color
,border-width
,border-radius
,border-image
, e as propriedades manuscritas. - A propriedade
color
. - As propriedades CSS:
text-decoration
,text-shadow
,text-transform
,letter-spacing
,word-spacing
(when appropriate),line-height
,text-decoration-color
,text-decoration-line
,text-decoration-style
,box-shadow
,float
,vertical-align
(somente sefloat
fornone
).
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
/* 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
- O peseudo-elemento
::first-line
.