Does IE7 have a problem with some CSS attribute selectors?

Question

I am trying to style some form labels by selecting them with their 'for' attribute. But nothing is being picked up when I preview it in IE7. I'm doing this because I'd like to style them differently to each other, without adding to the existing markup.

So if my css looks like the following, I get nothing:

<style>
 label[for="foo"] {
 background: blue;
 padding: 1em
}
</style>

<form>
 <label for="foo"/>bar</label>
 <input name="foo" type="text"/>
</form>

But if I change it to this, the styling works.

<style>
 label[fro="foo"] {
 background: blue;
 padding: 1em
}
</style>

<form>
 <label fro="foo"/>bar</label>
 <input name="foo" type="text"/>
</form>

Have you seen this kind of problem before? Is there a problem with the way I'm writing the CSS, IE7, or something else?

Answer 1

This user seems to have had the same problem you are having: here

He says that because "for" is a reserved word, it can't be used as a property name. But 'htmlFor' is the DOM property name associated with the for attribute

Answer 2

Labels are paired with specific input fields, so is there any reason why you cannot use class instead of creating a multitude of selectors in your CSS for this purpose?

Answer 3

Here is some detailed info about CSS selectors