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.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
The simple solution, although not the nice clean CSS that I want, is to split out the block into two separate selectors.