:first-letter (CSS selector)

Spec
Version
CSS1
Browser support (more…)
IE8+ FF3+ SA1.3+ OP10+ CH2+
Full Full Full Full Full

Syntax

:first-letter {
declaration block
}

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>

Example

The following example selector will match the first letter of a p element:

p:first-letter {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Buggy Buggy Buggy Full Full Full Full Full Full Buggy Buggy Full Full

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.1

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.

Footnotes

1 You can find some examples of this behavior at http://www.satzansatz.de/cssd/pseudocss.html.

User-contributed notes

ID:
#3
Contributed:
by Paul O'B
Date:
Wed, 18 Aug 2010 12:06:47 GMT

Firefox 3.6.8 and probably all versions earlier do not recognise the first-letter pseudo element if the first letter is an underscore or a hyphen (there indeed may be other characters that cause this behaviour but theses were the ones I noticed on testing).

ID:
#2
Contributed:
by Paul O'B
Date:
Mon, 22 Feb 2010 11:41:45 GMT

IE8 has a bug when you apply a background image to the first-letter pseudo-class. The image shows ok but any existing background image on that element is removed.

It seems that IE will only allow one image and if you specify an image for the first-letter and an image for the element itself then the first-letter image is only displayed.

Strangely enough if you use the same image for both the first-letter and the element itself then the same image displays twice as expected!

Bug documented in this thread (http://www.sitepoint.com/forums/showthread.php?p=4519830#post4519830).

Related Products