Consider this CSS:
[data-color="red"] h1 {
background-color:red;
}
[data-color="blue"] h1 {
background-color:blue;
}
And this HTML:
<div data-color="red">
<h1>red</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
Now take a look at the following demo of the above code in Webkit and any other browser:
http://jsfiddle.net/aUCkn/
What's strange is that if you put each h1 on the same line, i.e.:
<div data-color="red"><h1>red</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
It works in Webkit too:
http://jsfiddle.net/aUCkn/1/
Does anyone know where this comes from? Am I doing something wrong or is Webkit acting stupid here?