CSS attribute selector + descendant gives a bug in Webkit?

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.

Answer 2

Try adding [_] {} to your CSS (doesn't matter where).

In reality, it can be any attribute selector rule, without a descendant clause, that will potentially match the attributed elements selected by the original selectors, i.e.: [data-color] {} and div[data-color] {} will fix the others, but a[data-color] {} will not fix it.

I've tested it on the posted fiddle (http://jsfiddle.net/aUCkn/) and it works for Safari (5.1.2).

My co-worker and I found it after playing with lots of random ideas for workarounds.