mindgarden

I came across a weird CSS bug in Internet Explorer recently. I wasn’t able to find anything about it on positioniseverything.net or anywhere else so I thought I might as well write a few lines about it.

When using the :last-child selector which is not supported in Internet Explorer while grouping it with other selectors IE8 will ignore these.

So when doing something like

#testbox2 p, #testbox1 p:last-child {
font-weight: bold;
}

I would expect a paragraph in testbox2 to become bold. Which it does in IE7. But IE8 chooses to ignore that selector as well even though there shouldn’t be a problem with that.

If you try

#testbox2 p, #testbox1 p:nth-child(2) {
font-weight: bold;
}

IE6 and 7 as well start to ignore the testbox2 selector.

Update I’ve put together two quick test pages:
test page for IE8 bug when grouping selectors using :last-child
test page for IE8 bug when grouping selectors using :nth-child