Analysis of selector bugs in Microsoft’s Internet Explorer
(or “Microsoft’s methods of child abuse”)

Introduction

It is well-known that one of IE’s many faults is its inability to handle CSS child selectors (and also, as it turned out, adjacent sibling selectors). It has, at the time of writing, often been claimed that the selector A > B is treated like A B, and it is instead advised that it should be written A>B, which IE is supposed to ignore.

This is not quite true. The behaviour is much more interesting, as I found out when the selector .foot-notes > * { font-size: 90%; } caused an entire page to look like a bunch of flies just had an important call of nature.

Test results

The test were made using a simple document and manually testing the different elements, classes and ids, including non-existent ones. The child selectors were tested 2005-04-26, and the sibling selectors 2005-04-30. All tests refer to Internet Explorer 5.0 on Windows 98SE.

The original test results (child selectors, sibling selectors) can be summarised as follows, where a capital (A) can be an element (a), class (.a), id (#a) or the univeral selector (*).

Summary of IE’s selector bugs
Selectoris equivalent to
ChildSibling
A > B A + B B
A >B A +B B
A> B A+ B A B
A>B A+B AB
Some notable exceptions
Selectoris equivalent to
.a.b.b
#a#b#b
*b*

The concatenation effect has some interesting consequences when using class or id selectors: Instead of matching a child or sibling element with a particular class/id, the selector may end up matching a completely different class/id!

Consequences of selector concatenation
Selectoris equivalent to
ChildSibling
.a>b .a+b .ab
a>.b a+.b a.b
#a>b #a+b #ab
#a>.b #a+.b #a.b
Unexpected exceptions
.a>.b .a+.b .b
*>b *+b *
A small sample of invalid selectors
#>a.b #+a.b #a.b
a.>b a.+b a.b
Additional observations
SelectorMatches
#a*id="a*"
.a*class="a*"

Conclusion

It is unlikely (but certainly possible) that the concatenated selectors will end up matching something by accident. So my conclusion is, that although the problem statement is incorrect, the original advise, accompanied by a caution of the potential side-effects, is still good advise.

Beware of S>U>B and A>B>BR. :-)

Nils F. Engström
Uppsala
2005-04-26

© Nisse Engström | Updated: 2005‑07‑17 | Reviewed: 2005‑04‑30
Valid: HTML 4.01 / CSS2.1