::first-letter (:first-letter)
==============================

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

* Todas as propriedades de fonts : `font` (en-US), `font-style` (en-US), `font-feature-settings`, `font-kerning`, `font-language-override` (en-US), `font-stretch` (en-US), `font-synthesis` (en-US), `font-variant` (en-US), `font-variant-alternates` (en-US), `font-variant-caps` (en-US), `font-variant-east-asian` (en-US), `font-variant-ligatures` (en-US), `font-variant-numeric` (en-US), `font-variant-position` (en-US), `font-weight`, `font-size`, `font-size-adjust` (en-US), `line-height` (en-US) and `font-family`.
* Todas as propriededas de background : `background-color`, `background-image` (en-US), `background-clip`, `background-origin`, `background-position` (en-US), `background-repeat` (en-US), `background-size`, `background-attachment`, and `background-blend-mode`.
* Todas as propriedades de margem: `margin`, `margin-top`, `margin-right` (en-US), `margin-bottom`, `margin-left` (en-US).
* Todas as propriedades de "padding" (preenchimento): `padding`, `padding-top` (en-US), `padding-right` (en-US), `padding-bottom` (en-US), `padding-left`.
* Todas as bordas: the taquigraficas `border` (en-US), `border-style` (en-US), `border-color` (en-US), `border-width` (en-US), `border-radius` (en-US), `border-image` (en-US), e as propriedades manuscritas.
* A propriedade `color`.
* As propriedades CSS: `text-decoration`, `text-shadow`, `text-transform`, `letter-spacing`, `word-spacing` (en-US) (when appropriate), `line-height` (en-US), `text-decoration-color` (en-US), `text-decoration-line` (en-US), `text-decoration-style`, `box-shadow`, `float`, `vertical-align` (somente se `float` for `none`).

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 with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* O peseudo-elemento `::first-line` .