On a recent project, I came across an interesting bit of behavior from Windows Internet Explorer 6 that I wasn’t expecting. I created the following CSS rule:

input.text,
input[type="text"] {
    border: 1px solid #555; color: #555;
}

I initially created this rule to pass browsers who understand attribute selectors the CSS while at the same time creating a class selector for IE to understand when I added that class to the <input />. (A bit redundant, I know.)

Thing is, IE was ignoring the rule completely. I couldn’t figure out why it was happening. I removed the attribute selector from the rule and IE applied the CSS rule to the <input />.

The more I thought about it, I wondered if IE had trouble with the rule since it encountered an unknown selector last in the chain. What happened if I reversed the order of the selectors?

input[type="text"],
input.text {
    border: 1px solid #555; color: #555;
}

I figured IE would ignore the first selector in the chain and apply the second one. No dice, it still ignored the entire rule.

The lesson here is: If you want to use an attribute selector (or any selector IE doesn’t understand), separate it out as it’s own rule. If you do that, IE will apply the class selector and other browsers will apply the both the class and attribute selector rules.

input.text {
    border: 1px solid #555; color: #555;
}
input[type="text"] {
    border: 1px solid #555; color: #555;
}