CSS selectors — ::first-line, ::first-letter

Both single : and double :: notation used in this test

Code used

#t1 p:first-letter {color: green; font-size: 300%; font-weight:bold; background:transparent}
#t1 p:first-line {background: lime; color:#fff;} 
#t2 p::first-letter {color: #ccc; font-size: 300%; font-weight:bold; background:#c00}
#t2 p::first-line {background: lime; color:#fff;}

Notes

1. Opera (up to version 8.5) doesn't apply the :first-line pseudo-element when the mime–type of the document is application/xhtml+xml; hence, a test-case served as html 4.01 text/html.
2. IE 5 Win doesn't apply the rules; IE 5.5 and IE 6 Win appear to understand the single and double column (:) notation. It is not clear if this by design or another twisted logic by this browser. I guess it simply ignores the first column when the double column notation is used. IE 5.x and 6: there are lots of inheritance problems with both selectors, particularly when used in combination with other selectors, see pseudo-CSS for some of them.
3. Opera 7.54, 8, 8.5 are buggy with the :first-line pseudo-element. There are some strange inheritance effects. Opera 9 performs better, but appears the fictional box as a block–level element. All versions of Opera have problems with combined selectors (in E F::first-line, element E is ignored or treated as universal selector.
4. Most browsers tested, except Safari and Gecko are wrong in painting the background for the :first-line pseudo-element: they expand the height of the anonymous box representing the first-line to include the height of the line-box created by the first-letter box.

back to introduction

Last modified: September 10 2009 03:09:00 GMT.

• A [ La Chatte Noire ] development area
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]