IE8 CSS grouped selectors bug


Here's an annoying bug I ran into today, which curiously seems only to apply to IE8 and not IE7.

If you declare a selector block in a stylesheet with a pseudo-class that IE8 does not recognise, mixed with one that it does, IE8 won't recognise either of them. Here's an example

p:last-child {
  border: 1px solid #000;

With this code in your stylesheet, IE8 will not apply the properties (in this case border) to any paragraph with the example class, as it doesn't understand the pseudo-class for :last-child. This confused me for a while, since bizarrely, IE7 does apply the properties to the example class, even though it doesn't understand :last-child either.

The simple solution, although not the nice clean CSS that I want, is to split out the block into two separate selectors.