::first-letter (:first-letter)

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


The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

The first letter of an element is not necessarily trivial to identify:

  • Punctuation, that is any characters defined in Unicode in the open (Ps), close (Pe), initial quote (Pi), final quote (Pf) and other punctuation (Po) classes, preceding or immediately following the first letter is also matched by this pseudo-element.
  • Similarly some languages have digraphs that are always capitalized together, like the IJ in Dutch. In these rare cases, both letters of the digraph should be matched by the ::first-letter pseudo-element. (This is poorly supported by browsers, check the browser compatibility table).
  • Finally, a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. In that case, ::first-letter will match the first letter of this generated content.

A first line has only meaning in a block-container box, therefore the ::first-letter pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell, list-item or table-caption. In all other cases, ::first-letter has no effect.

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-letter pseudo-element:

As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.

In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.

As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.

If legacy browsers must be supported, :first-letter is the only viable choice; if not, ::first-letter is preferred.


/* make the first letter of every paragraph red and big */

p::first-letter {  /* Use :first-letter if support for IE 8 or earlier is needed */
  color: red; 
  font-size: 130%; 


Specification Status Comment
CSS Pseudo-Elements Level 4
The definition of '::first-letter' in that specification.
Rascunho atual Generalized allowed properties to typesetting, text decoration and inline layout properties, opacity and box-shadow.
CSS Text Decoration Module Level 3
The definition of 'text-shadow with ::first-letter' in that specification.
Candidata a Recomendação Allowed the usage of text-shadow with ::first-letter.
Selectors Level 3
The definition of '::first-letter' in that specification.
Recomendação Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph IJ). The two-colon syntax for pseudo-elements has been introduced.
CSS Level 2 (Revision 1)
The definition of '::first-letter' in that specification.
Recomendação No significant change, though CSS Level 2 still used the one-colon syntax.
CSS Level 1
The definition of '::first-letter' in that specification.
Recomendação The initial definition used the one-colon syntax.

Browser compatibility

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!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85)
Old one-colon syntax (:first-line) 1.0 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85)
Support for the Dutch digraph IJ Não suportado Não suportado bug 92176  Não suportado Não suportado Não suportado
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1) Não suportado ? ?
Old one-colon syntax (:first-line) ? 1.0 (1) ? ? ?
Support for the Dutch digraph IJ ? Não suportado ? ? ?

See also