Brady J. Frey

May 8th, 2008

First-line and letter for all browsers

in Web Design, Web Development

Safari allows full support of the first-line and the first-letter CSS request, but Firefox 2 and under only shows partial support. Case example: the containing div of this post is class=entry (class instead of ID for other pages that require it), but simply calling .entry:first-line or .entry:first-letter works fine in Safari, but surprisingly fails in firefox.

Tracerhand in this forum post had a quick supported solution. Instead of calling the pseudo element on the class, call it on the subsequent tag while making sure to use first-child to isolate it as the first tag only:

.entry p:first-child:first-letter

and:

.entry p:first-child:first-line
Similar Posts

Your thoughts:

Tell us what you think: