:first-letter (CSS selector)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Buggy | Full | Buggy |
| Version |
|---|
| CSS1 |
Example
The following example selector will
match the first letter of a p element:
p:first-letter {
⋮ declarations
}Description
The
:first-letter pseudo-element is mainly used for
creating common typographical effects like drop caps. This pseudo-element
represents the first character of the first formatted line of text in a block-level
element, an inline block, a table caption, a table cell, or a list
item.
No other content (for example, an image) may appear before the text.
Certain punctuation characters, like quotation marks, that precede or follow the first character should be included in the pseudo-element. Despite the name, this pseudo-element will also match a digit that happens to be the first character in a block.
If the
element is a list item, :first-letter applies
to the first character of content after the list item marker unless the
property list-style-position is set to
inside, in which case the pseudo-element may be
ignored by the user agent. If an element includes generated content
created with the :before
or :after
pseudo-elements, :first-letter applies to the
content of the element including the generated content.
The CSS2 specification states that only certain CSS properties are to be supported for this pseudo-class.
Let’s look at a code fragment that shows how this pseudo-element works:
<p>Hello, World!</p>
The
selector p:first-letter matches the letter H.
It’s as if there were an extra element in the markup:
<p><p:first-letter>H</p:first-letter>ello, World!</p>The above markup isn’t valid HTML—it’s just a visualization of the pseudo-element concept.
If the first child node of an element is another block element, this pseudo-element will propagate to the child node. Here’s an example:
<div> <p>Hello, World!</p> </div>
Both
selectors—div:first-letter and
p:first-letter—will match the letter H. The
equivalent pseudo-markup is:
<div>
<p>
<div:first-letter>
<p:first-letter>H</p:first-letter>
</div:first-letter>ello, World!
</p>
</div>
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Buggy |
| 9.5 | Buggy |
Internet Explorer
versions up to and including 7, and Firefox versions up to and including 2
ignore the letter-spacing property when it’s applied to
this pseudo-element.
The behavior mentioned above, where if the first child node of an element is another block element, this pseudo-element is propagated to the child node, is not supported by Internet Explorer up to and including version 7, Firefox up to and including version 2, and Opera up to and including version 9.5. However, Safari, up to and including version 3, does support this behavior correctly.
In Internet Explorer versions up to and including 7:
Quotation marks are treated as punctuation, but all other characters are treated as letters.
The list-item marker is included within this pseudo-element.
The
floatproperty is not applied correctly—only a value ofleftis supported, and once it’s set, it can’t be overwritten with a value ofnonelater in the style sheet.When this pseudo-element is applied to a positioned element that has a layout, and whose first character is an inline descendant, the first line box isn’t displayed.
Bizarre specificity and inheritance problems affect this pseudo-element.1
Internet Explorer versions up to and including 7, Firefox versions up to and including 2, and Opera 9 will not include punctuation immediately following the first character in this pseudo-element.
In Opera versions up to and including 9.5, whitespace is counted as a letter if it’s preceded only by punctuation.
In Internet Explorer 6, this pseudo-element fails if it’s not immediately followed by whitespace. This means that whitespace must appear between the pseudo-element and the declaration block, as well as between the pseudo-element and the comma, if the pseudo-element isn’t the last selector in a group of selectors.
Internet Explorer versions up to and including 6 will crash in certain situations involving this pseudo-element and underlined links. This problem’s documented on the Quirksmode web site.
Footnotes
1 You can find some examples of this behavior at http://www.satzansatz.de/cssd/pseudocss.html.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
