Oper'nye fun with first-line

Recently I came across a wild bug with block elements and a pseudo-class: first-line in opera, after asking Google, I realized that very few people came across it.

Suppose we need to make a header like this, and it just needs to have a float: left









')

But somewhere on the page inside the block with the whereIAm class there is another h2 header whose first line needs to be repainted in acidic color.

Everything is quite trivial:

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >

< title > | Opera </ title >

< style type ="text/css" >

h2 {

float: left;



font-family:Verdana, sans-serif;

padding: 5px;

font-weight: 300;

border: 4px solid #97D95C;

background: #D9FF77;

color: #437346;

}

.whereIAm h2:first-line{

color: lime;

}

</ style >

</ head >

< body >

< h2 > </ h2 >

</ body >

</ html >



* This source code was highlighted with Source Code Highlighter .

voila in IE5.5 +, safari, firefox and chrome effect is achieved, but the opera (tested in 10.10, and 9.64) shows the following:





and if you remove the rule .whereIAm h2: first-line, or add a class for the title:

.whereIAm h2.target:first-line everything returns to normal



can anyone know why and how is this happening?