nth-child not working

Question

I have a list and need every other item on it to change color and remove its margin. I used the nth-child and it works perfectly on everything but IE7-8. I know that they don't support nth-child so i used Jquery.

I found this: :nth-child is not working in IE and this: http://verboselogging.com/2010/01/17/making-nth-child-work-everywhere

I tried to implement them but it's still not working. You can view it here: http://www.dffernandez.com/client_review_files/tests/nth-child.html

#prop-images-wrapper {
float: left;
margin-bottom: 0.6em;
background-color: #F00;
width: 340px;
margin-right: 5px;}

#prop-images-wrapper li:nth-child(2n+1), .difcolor {
margin-right: 0px;
background-color: #06F;}

--

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>$(document).ready(function(){
$("#prop-images-wrapper li:nth-child(2n+1)").addClass("difcolor");
});</script>

Thank you in advance.

Note: you can use `:nth-child(odd)` and `:nth-child(even)` to make your code more readable. — callumacrae, Nov 29 '12 at 17:16

score 0 · Answer 1 · answered Nov 29 '12 at 17:16

0

You forgot to load jquery in your test page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

http://jsfiddle.net/m6vnt/1/

answered Nov 29 '12 at 17:16

h0tw1r3

6,618
1
28
34

Dennis Martinez · Accepted Answer · 2012-11-29T17:35:20.590

0

if you're using jquery to set the to nth child, just use jquery for everything instead of having a css block and code for jquery.

check out the following jsfiddle

http://jsfiddle.net/RjGpC/1/

in this following line

#prop-images-wrapper li:nth-child(2n+1), .difcolor {

just remove the li:nth-child(2n+1),

edited Nov 29 '12 at 17:35

answered Nov 29 '12 at 17:24

Dennis Martinez

6,344
11
50
67

nth-child not working

2 Answers2