:first-line test

Isaac Z. Schlueter · other tests

The first line of each PARENT list item should be red. This file is not running in quirks mode, but according to my tests, it doesn't matter whether or which DOCTYPE you use. If child LIs have red first-lines, then the browser is broken.

Results:

MSIE 6 Broken

The li:first-line also applies to the first lines of all the children LIs, even if their :first-line pseudoclass is overridden by a li li:first-line rule of their own. The :first-line pseudoclass is thus semi-functional, but completely useless in recursive situations where you have an element containing other elements of the same tagName. Also, a :first-line background property will affect the entire parent element above the first linebreak, rather than just applying a background to the line of text (as if the text was wrapped in a span, for example.)

FireFox and Opera Mostly Functional

The li:first-line rules can be overridden on the child elements. :first-line backgrounds are only applied to the text, not to the space above the text. I'm assuming that this is the way it should work, since it makes the most sense.

Other Oddness

On all browsers tested (Opera 7, MSIE 6, Firefox 1.0), a :first-line property would not be applied to block-level elements that are direct descendents of the :first-lineed selector. For example, if you apply a :first-line property to an LI, then it will not affect LI P. I'm not sure if this is what the specs say it should be doing, but it seems to me like this property should intuitively be inherited, barring any overriding rules with higher specificity, since that is how the other pseudoclasses work.

The CSS: li:first-line { color:#900; background:#fcc; } li li:first-line { color:#060; background:#cfc; } span.block { display:block; border:5px solid #0f0; margin:5px; padding:5px; } li p { border:5px solid #00f; margin:5px; padding:5px; } li { border:5px solid #f00; margin:5px; padding:5px; }