CSS rules for td elements with colspan > 1 in IE

Question

I need to apply some css styles to td elements which have 'colspan' attribute and its value greater than 1.

I do the following:

td[colspan][colspan!=1] {
 background: red;
}

It works all browsers instead IE (include latest). Please help. How can I fix that.

Answer 1

That is not supposed to work in any browser because [colspan!=1] is not a valid CSS attribute selector. It only exists in jQuery as a non-standard extension.

From the jQuery documentation:

This selector is equivalent to :not([attr="value"]).

This means for it to work in CSS you need to use this instead:

td[colspan]:not([colspan="1"]) {
 background: red;
}

Remember that :not() isn't supported by IE older than version 9. If you need to support older browsers, you can either use jQuery to apply the styles, or if you must use CSS then you should override the styles for your td elements with [colspan="1"] instead:

td {
 background: red;
}

td[colspan="1"] {
 background: transparent;
}