Question

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?

Answer 1

The first jsFiddle is broken in my Chrome 12.0.742.112 (stable).

However, it works in my Chrome 14.0.803.0 dev-m.

So, they’re already aware of and have fixed the bug. You just have to wait for the fix to land in the stable channel.

I’ll try to find a link to a bug report, if one exists.