Strict Standards: Redefining already defined constructor for class Object in /home/richards/public_html/cake/libs/object.php on line 54

Strict Standards: Non-static method Configure::getInstance() should not be called statically in /home/richards/public_html/cake/bootstrap.php on line 38
IE8 :last-child bug - Richard Scarrott: Frontend Web Developer

IE8 :last-child bug

IE8 doesn't support the :last-child pseudo selector which is fine -- we’re going to be faffing about with last-child classes in our mark-up for a number of years yet. I’ve just discovered, however, that IE8 fails to honour a supported selector if it is grouped with a second selector containing :last-child. Here’s an example.

Take this HTML:

<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li class="last-child">item 5</li>
</ul>

And this CSS:

li {
	background:red;
}

li:last-child, li.last-child {
	background:blue;
}

You’d expect all list items to be red apart from the last one which should be blue, and you’d be right...apart from in IE8 which doesn't adhere to the last rule despite the presence of the standard .last-child class. Nice one Microsoft!

Obviously this is pretty minor as you can either separate both the psudeo :last-child and the standard .last-child class into two rules (redundancy?), look into using :first-child instead, or even do away with the the psdudo class altogether.

The latter however isn’t my ideal as I find, when working on larger projects with multiple developers, the .last-child (or .first-child -- looking at you IE6) class can often be overlooked for one reason or another. Including the psudeo selector in your CSS means modern browsers will still adhere to the rule regardless of the mark-up.

As I say it's not a massive issue but one to watch out for if you like to see sites looking identical cross-browser.

Comments

Feel free to use basic HTML to format your comment.

  • 82

    Josef says:

    08.10.2010

    Thanks for posting this, only thing is... did you find a fix for this bug, or has anyone out there found a fix for it? It is bad enough having to stick a "last" class on the for IE6 but then for IE8 to not even read the CSS for either the pseudo-class OR the class, is ridiculous! Down with IE!

  • 83

    Richard Scarrott says:

    11.10.2010

    It seems unlikely there will be a fix for this as a) it's not too difficult to circumvent so people won't spend too long looking and b) it's a CSS parser bug meaning its rather inherent. I'll let you know if I come across a fix however.

  • 84

    Davor says:

    28.10.2010

    Yeah, nice post Richard. I used option with two separated rules. But very idiotic for IE8. Thanx

  • 289

    Rick Hocutt says:

    04.01.2012

    I thought I was going mad when I came across this bug until I found your post which confirmed my findings. Absolutely ridiculous considering IE7 could handle the combination of pseudo and standard class selectors. Thanks for the post confirming that I wasn't going crazy :)

  • 442

    ATJ says:

    23.02.2012

    Thank you :) 

  • 1670

    Ron says:

    16.07.2012

    Hi, I was facing this problem and stumbled across your link and it fix the problem for me. Thanks a lot!