li:last-child doesn't seem to work in IE8

Question

Below is my html structure

<div class="footerMenu">
   <ul>
     <li>Home</li>
     <li>About</li>
     <li>Feedback</li>
     <li>Contact us</li>        
   </ul>            
</div>

But

.footerMenu li:last-child { }

selector doesn't seem to work in IE8. But http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx tells that the pseudo-selector is suppported.Any help on this!

Have you tried .footerMenu li: { something drastic; } just to see if this much is working? — Sachin Kainth, May 29 '12 at 13:50
No, it actually doesn't. It says right there that it's supported in IE9 and later. — Ry-, May 29 '12 at 13:51
http://stackoverflow.com/questions/1293369/using-last-child-in-css — Diodeus - James MacFarlane, May 29 '12 at 13:52
yup correct last-child is not but strangely first-child is .. — user1184100, May 29 '12 at 13:54

BoltClock · Answer 1 · 2012-05-29T13:59:33.257

27

You read it wrong. It says that it's not supported in IE8:

If you were looking at :first-child, which does have support in IE7 and IE8, and thinking that the same applies to :last-child... surprise! It doesn't.

:first-child is a CSS2 selector, but :last-child was only introduced in CSS3, so since Microsoft was only aiming for CSS2.1 compliance with IE8, they likely didn't bother about :last-child until post-IE8.

If you know you will only have four li elements, then you should be able to use adjacent sibling selectors to reach the fourth li:

.footerMenu li:first-child + li + li + li

edited May 29 '12 at 13:59

answered May 29 '12 at 13:53

BoltClock

700,868
160
1,392
1,356

yup i assumed that since first was there even last would be also supported. thanks for info. – user1184100 May 29 '12 at 14:00
1

Incidentally, what the table **does** get wrong is IE9's support for CSS3's double-colon notation for CSS1/2 pseudo-elements (while oddly enough it gets it right for CSS3 pseudo-elements): http://stackoverflow.com/questions/7157405/are-css3-after-and-before-pseudo-elements-rendered-by-ie9/7157425#7157425 – BoltClock May 29 '12 at 14:17

score 2 · Answer 2 · answered May 29 '12 at 13:56

2

To build on the other guys answers, an alternative could be to use javascript to fill the gaps, selectivizr is a good example of adding last-child support.

http://selectivizr.com/

answered May 29 '12 at 13:56

Alex KeySmith

16,657
11
74
152

score 1 · Answer 3 · answered May 29 '12 at 13:53

1

The link you provided shows that it isn't supported for IE8... IE9+ only. Googling last-child IE8 brings up a whole host of similar queries.

answered May 29 '12 at 13:53

Jeff Watkins

6,343
16
19

score 1 · Answer 4 · answered May 29 '12 at 13:54

1

Where did you read that? :first-child is supported back to IE7, but :last-child is IE9 and later.

No, it doesn't.

(Headers moved down for your convenience)

answered May 29 '12 at 13:54

Ry-

218,210
55
464
476

1

sorry for my mistake..i overlooked it! – user1184100 May 29 '12 at 13:55

score 0 · Answer 5 · answered May 29 '12 at 13:55

The other answers are correct that IE8 doesn't support last-child. However, to solve your particular problem, you could either a) manually add a class to the last <li> or b) as this is a menu, and these will presumably have links inside them, target the last link with an attribute selector, which does work in IE8. Something like

.footermenu a[href="contact.html"] { ... }

score 0 · Answer 6 · answered May 29 '12 at 14:00

0

Try to use something like that:

.footerMenu li {background-color: expression(this.previousSibling==null?'red':'green');}

answered May 29 '12 at 14:00

Xella

1,283
10
10

score 0 · Answer 7 · answered Jun 18 '14 at 23:28

0

I know its old but...there is a simple way to do it:

Just in the li you want the change do this:

<li style="yourstyle;">...</li>

answered Jun 18 '14 at 23:28

Walter

1

li:last-child doesn't seem to work in IE8

7 Answers7

Linked