CSS styling for every second div in a list

Question

I have div boxes on my website. Every second box should have a border in another color.

In one case the divs appear as a list. I cannot change the HTML code because it is automatically generated. On the other parts of my website I do the styling like this and it works:

.displayBlogpost:nth-child(2n+1) {
    border: #B4C556 1px solid;
}

But with the ol that does not work anymore. I have no idea how to get access to every second .displayBlogpost-div. This is my code: http://jsfiddle.net/8SbbL/

Answer 1

The element is within an li, so it is always the first and last element. Use the n-th child trick on the actual li.

#searchresult li:nth-child(2n+1) .displayBlogpost {
    border: #B4C556 1px solid;
}

Working fork: http://jsfiddle.net/FJuzm/

Answer 2

to make use of the nth-child you need to apply it to the list item,

http://jsfiddle.net/8SbbL/6/

you can also use nth-child(even) and nth-child(odd) which reads nicer than your 2n-1