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.
3 answers
solution1
0 2014-11-26 21:02:44
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
solution2
0 2014-11-26 21:09:18
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.
solution3
-2 2014-11-26 20:44:31
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.