This issue was partially fixed in Internet Explorer 7 beta 2. Some attributes (such as class and title) do not seem to work properly with attribute selectors. This was fixed completely in Internet Explorer 9.
Well, you may not know what these are, but believe me, they are one of the most useful parts of CSS. They make it possible to target styles incredibly efficiently without needing to litter your code with class attributes.
Say you want to make every table cell in the second column of a table blue, well, combine the + selector with the
:first-child pseudo class, and it is as easy as:
td:first-child + td { color: blue; }
or the third column:
td:first-child + td + td { color: blue; }
How about nested lists. Say you have lists nested 10 levels, and you want to target every LI in the third level, but
nothing more. There could be hundreds of elements, in hundreds of ULs. You could apply classes to every LI you want (this
might take a while), or you could use an ID for the top most list, and use the > selector:
#idOfList > li > ul > li > ul > li { color: blue; }
Ok, what about attributes. Say you want to apply a purple border to every TD that has the colspan attribute set to 2. Again
you could use classes, but there may be many of these, and if only it were supported, you could use the [attr] selector:
td[colspan="2"] { border: 1px solid #f9f; }
I hope by now you understand the power and flexibility of these. They save a vast amount of extra HTML, and time. But out of all "modern" browsers, IE is the only one that has seen fit not to implement it, despite the fact that they were included in the CSS2 specification before even IE 5 was released.
|
|
| |
|
|
Workaround: Use classes. Lots and lots of bloated wasteful classes. For the > selector, you can
sometimes (but not always) use something like:
#idOfList li li li { color: blue; }
#idOfList li li li li { color: green; }