This pseudo-element is used to apply properties to the first rendered
character of a block element structure on the output device (browser
screen, printer, etc.) This pseudo-element does not actually exist as
part of the document tree - it is a "fictional tag sequence" that is
logically deduced from the content, as well as other language rules (some
languages have specific letter combination rules, and Unicode has rules
about keeping particular character/punctuation combinations together.)
The 'first-letter' pseudo-element may often be used to create "drop-caps"
or other similar first-letter effects. It is similar in behavior to an
in-line element if the 'float' property is set to 'none', but otherwise
it should react like a floated element (see restrictions on applicable
properties in the Notes section below.)
Example
Ext/Doc: div:first-letter
{ font-size: xx-large }
In-Line: NA
Notes
CSS2 places restrictions on what properties can be applied to 'first-letter'
pseudo-elements: font properties, color and background properties,
margin properties, padding properties, border properties, and
the 'text-decoration', 'text-transform', 'text-shadow', 'float',
'clear', and 'line-height' properties. The 'vertical-align'
property can also be applied, only if the 'float' property is set to 'none'.
In the fictional tag sequences defined by the 'first-letter' and
'first-line' pseudo-elements, the 'first-letter' fictional sequence
is contained inside the 'first-line' fictional tag sequence; this
allows properties applied to 'first-line' to properly cascade and
apply to the 'first-letter' pseudo element unless overridden.
CSS1 Conformance: A browser may ignore the
':first-letter' Pseudo-element.
Browser Peculiarities
Opera
3.5+:
- This Pseudo-element only applies to block elements, and
DL/DT/DD, and TABLE/TD/TH.