come on my selector pt3
With the present and future of css selectors explained, there is only one area untouched. The land of buggy implementations. While all browsers have problems handling certain css selectors (especially some borderline cases), there is only one king in the land of css selector bugs. And he makes the lives of us everyday css implementors a lot harder than it's supposed to be. Guess which browser we're talking about.
multiple selectors on one html element
1/ a.action.print { *properties* } 2/ body#blog.article { *properties* } If you've read through both articles you might have wondered why I haven't mentioned the fact that a combination of classes and ids can be used on one single html element.
Well, you can do it, sort of, if you're careful enough. In the example above, all links that have both the action and print class assigned to it will be targeted. The order of the classes stated in html or css don't have an influence on the selection of the element. Similarly, you can string together ids and classes on the same html element, as illustrated in the second example.
This will work in all browsers, except for IE6 (and below, I assume).
the ignorant beast
1/ .action.print { *properties* } 2/ .page.print { *properties* } 3/ .print { *properties* } When stringing together multiple classes on a single html element, IE6 will ignore whatever comes between the html element and the last class. If you look at the example above, all three selectors will match html elements with the class "print" defined on them. Furthermore, the specificity of all three rules will be the same for IE6.
This means that the singular .print selector will override all properties in the previously matched selectors.
bug prevention
There are a couple of things you can do to counter this bug.
1. The safest solution is to have classes that are all unique in name. Sadly, this is not the cleanest method and goes in against the logic of stringing classes together. Especially with class names like "last" or "first" this can become quite a drag.
2. Another solution is to actually flip the order of the classes around, where the most important class for the selection will come in last. This method will only work in very specific cases and can backfire pretty quickly if you're not paying close attention.
3. Not always possible, but sometimes it can be enough to simply expand the context of the selector to fix the problem. If you can differentiate both selectors by further defining their contexts, there's no problem at all.
4. If you have access to the html, there's another dubious fix for this issue. If you're really in a deadlock situation, you could add an extra html element to the source code and splice the selector string into descendant selectors. This solves your problem but adding extra mark-up might be overkill.
5. One final thing that can protect you against this bug is to make sure the longer strings always precede the shorter strings. The specificity of both selectors will remain the same for IE6 but the longer one will win the battle due to it appearing last in the css source.
mixing ids and classes
1/ #header.twoCol { *properties* } 2/ #header.threeCol { *properties* } While the problem above cannot occur on a single page, this could mess up your layout if you're working on a multi-page site. I have done some testings but can't find any logic in the buggy behavior of IE6. It will apply some of the selectors but the problem seems more complicated than the multiple classes issue.
If you have any articles or leads on this, please share!
scared yet?
While it is an annoying bug that has no neat, all-purpose solution there's no real need to stop stringing together classes. As long as you can recognize the issue when you encounter it in IE, there's always one way to counter it. In most projects I've done, there have always been issues in IE6 related to this bug, but never many, and never any that couldn't be fixed.
Still, another reason for IE6 to disappear as quickly as possible. And with this, my mini-series on css selectors is completed. I hope you found it useful somehow.