:first-letter (CSS selector)

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

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 3.5, and Opera up to and including version 10. However, Safari and Chrome do support this behavior correctly.

In Internet Explorer 8 the !important declaration is ignored if the selector contains a :first-letter or :first-line pseudo-element.

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 float property is not applied correctly—only a value of left is supported, and once it’s set, it can’t be overwritten with a value of none later 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.¹

Internet Explorer versions up to and including 7, Firefox versions up to and including 2, and Opera versions up to and including 10 will not include punctuation immediately following the first character in this pseudo-element.

In Opera versions up to and including 10, whitespace is counted as a letter if it’s preceded only by punctuation.

In Safari versions up to and including 4 and Chrome versions up to and including 4, whitespace between leading punctuation and the first non-white character is ignored.

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.