IE8 LI + LI selector not working

Question

I read one another post that the following should work in ie8, as a good alternative to using nth-child

css:

ul > li + li{
  background-color:red;
}

ul > li + li + li{
  background-color:blue;
}

ul > li + li + li + li{
  background-color:green;
}

html:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

However I can't get it to work. I tried the exact same code in a plain html file. And also can't get it to work on a fully developed website. I used ie8 development tools to debug it but the development tools is not picking up the "+" selector which is (apparently) supported.

I tried adding to to codepen and jsfiddle to show you a sample, but those two tools won't work in ie8.

http://codepen.io/anon/pen/jEPxeb

Any ideas as to what I am doing wrong?

===== UPDATE ======

As it turns out, there was something wrong with my code. On the sample I used the doctype wasn't correct, and on the fully developed website the ie only if statement was incorrect. Once I fixed those two items the code worked as expected. Thank you for all who helped me get to that conclusion.

`ul > li:first-child` http://stackoverflow.com/a/8492882/3794472 — Jeremiah Winsley, Nov 26 '14 at 20:42
Yes, that works for the first-child, but not for all the others. — , Nov 26 '14 at 20:44
I created a [fiddle](http://jsfiddle.net/ye7ynevv/) with your example, ran the [result](http://jsfiddle.net/ye7ynevv/embedded/result/) through [BrowserStack](http://www.browserstack.com/) using Windows XP / IE8, and as far as I can see, it works as expected: http://i.imgur.com/YdtjXT6.png. Can you double check your other markup / CSS selectors on your actual site to make sure something else isn't screwing it up? (Note: using jsfiddle instead of codepen because it can show the [result](http://jsfiddle.net/ye7ynevv/embedded/result/) directly... IE8 can't load the full jsfiddle/codepen UI). — Lukas S., Nov 26 '14 at 20:58
I was able to access the jsfiddle example on the ie8 browser. It works there. So there's something else wrong with my code. Thank you for the effort. — , Nov 26 '14 at 21:25

score 0 · Answer 1 · answered Nov 26 '14 at 21:02

0

The following works in IE8 on Windows XP:

ul > li:first-child {
  background-color:red;
}

ul > li:first-child + li {
  background-color:blue;
}

ul > li:first-child + li + li {
  background-color:green;
}

Make sure that you specify a doctype in order for this to work:

<!DOCTYPE html>

See http://msdn.microsoft.com/en-us/library/ie/cc848865%28v=vs.85%29.aspx

answered Nov 26 '14 at 21:02

Jeremiah Winsley

2,537
18
30

Weird. I have the same doctype. I am testing it on IE, but windows 7 not widows XP. It's a virtual machine provided by modern.ie. – Nov 26 '14 at 21:22
Using the IE 8 document mode, in IE 11 on Windows 7, I get the same results. Do you have any other CSS that references `ul` or `li` that could be affecting it? – Jeremiah Winsley Nov 26 '14 at 21:25

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

According to the doc adjacent sibling selectors will work in all version of Internet Explorer from 7++.

Note:

Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector.

In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

score -2 · Answer 3 · edited Nov 26 '14 at 20:46

-2

In this case use jquery instead of css. Then it would run all version browser like ie8.

$('li:nth-child(1)').css('background','red');
$('li:nth-child(2)').css('background','blue');
$('li:nth-child(3)').css('background','green');

edited Nov 26 '14 at 20:46

Nathan MacInnes

11,033
4
35
50

answered Nov 26 '14 at 20:44

Ahmad Sharif

4,141
5
37
49

I am aware of that. But I am trying to understand why the "+" selector won't work if ie8 supports it. – Nov 26 '14 at 20:45
2

It's a pretty heavy addition to add jQuery to your page simply to add CSS selector support. There are native workarounds for this... – War10ck Nov 26 '14 at 20:48
@nathan-macinnes IE 8 has also 4/5 version. And please check the doc type declare. The following link may help you. http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working One more thing the best way to do the safe code specially for ie. So it would be safe to use jquery. – Ahmad Sharif Nov 26 '14 at 20:58
@AhmadSharif, I don't understand... why have you tagged me? All I did was add quotes to your answer! – Nathan MacInnes Nov 26 '14 at 21:01
It would be safe to use jQuery but overkill for this purpose alone. – War10ck Nov 26 '14 at 21:06

IE8 LI + LI selector not working

3 Answers3