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:

Answer 1

--- UPDATE ---

This issue is fixed in Chrome as of version ~18, it continues to be an issue in other WebKit based browsers.

As far as solutions for this issue, Michael Morton's answer above is the best one here - it is more flexible and performant than mine. I have upvoted Michael's answer and suggest you use it.

---

Here's a CSS hack that fixes the issue: http://jsfiddle.net/aUCkn/101/

You just need to put * + before the selector. Now before you all grab your pitchforks and torches over the use of the star selector, remember that it is all the way to the left, so it shouldn't affect performance in any meaningful way ;)

PS - I can also confirm this bug affects ALL versions of ALL WebKit browsers on ALL platforms and devices - other than Chrome 14+. What an absolutely terrible bug, now the majority of WebKit browsers need to retract the claim they support even the now-ancient CSS2.1 spec. Wow, LOL.