How to avoid double borders on list of divs

Question

I have a list of divs which are used as a FAQ. Sometimes the divs are listed below each other, sometimes there is text between them. When they are listed below one other, I have

Answer 1

add this rule to your CSS

.faq + .faq
{
    border-top: none;
}

Explanation: .faq that comes directly after another .faq dont get a top border.

1. this is a pure CSS solution (without Script)
2. it doesnt assume anithing about the layout (the div's dont have to be last childs of a container, or at some specific index)
3. its fixes the double border issue even if their are multiple .faq one after each other.
4. its a cross browser solution.

See this Working Fiddle