While trying out the latest Opera 7.60 preview, I ran into a couple of of weird CSS bugs. It turns out they’ve both been around a while—one since 7.5 and one since 7.2. And they’re both related to problems with li:first-line.

In CSS, :first-line lets you apply style to (not surprisingly) the first line of an element. So if you say something like li:first-line {color: red} you should see the first line of every list element turn red. It’s got fairly wide support at this point—even IE 5.5 can handle it—but it seems some bugs crept into Opera 7.

The first one I noticed was fairly simple: If you have something in the form:

<ul>
  <li><a href="somewhere">Link</a></li>
</ul>
<p>More text<p>

…and you apply style to li:first-line, then the underlining for the link continues to the end of the page. Here’s an example of case 1.

Then there’s the really weird one. If you define style for li:first-line, create a multi-level list by nesting UL→LI→UL→LI, and one of the LI items containing a UL has only one word, that word will be invisible. Really.

<ul>
  <li>OneWord
    <ul>
      <li>Amazingly, that line won't show up.</li>
    </ul>
  </li>
</ul>

For whatever reason, if you’ve got two words they’ll show up. Here’s an example of case 2.

Of course, the really crazy thing about this is that the :first-line selector doesn’t have to apply to the list in order to break it. On the site where I found these, we have ul.someclass li:first-line {font-weight: bold}. It was breaking lists in different classes… or with no class at all!

I’ve reported the problems to Opera as bugs 159091 and 159092.