Question

I’m trying to do something what I thought would be a simple task but it wasnt that quite simple…
the issue in hand can be seen on this 2 links

http://kurdaktuellt.se/

http://kurdaktuellt.se/category/aktuellt/

the selector im using is rather simple

body:not(.single) #content > .post:nth-child(odd){
}
body:not(.single) #content > .post:nth-child(even){
}

The thing is that it work one way on the front page(first link) and another way on the category page(the second link) it’s as it takes a count the header element which it shouldnt if it would follow my selector properly…
Is there something im missing here?

all help is appreciated… aloot!
thx in advance

Answer 1

In your categories page you have an h1 as the first child of #content, which is interfering with the ordering of your children, causing your first div.post to no longer be the first child but really the second child (see the spec).

You can either use :nth-of-type() instead so only your divs (which have the class .post) are taken into account:

body:not(.single) #content > div.post:nth-of-type(odd)
body:not(.single) #content > div.post:nth-of-type(even)

Or you can choose to modify your HTML instead, either by moving that h1 elsewhere, or by adding another container around your div.post elements, such that your :nth-child() ordering won’t be messed up.