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

You sure can use jQuery to do this:

$('.faq').each(function(){
    if($(this).next('.faq').length > 0){
        $(this).css({borderBottom:0});   
    }
});

JSFiddle

For each .faq, if there is another .faq following, remove this bottom border.

Answer 2

Can you not simply use a negative margin ?

.faq {width:200px;border: 1px solid #ffffd;margin-top:-1px;}

http://jsfiddle.net/bYPR6/7/

Answer 3

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

Answer 4

Maybe just add margin-top:5px; (or less) in .faq :

.faq {width:200px;border: 1px solid #ffffd;margin-top:5px;}

http://jsfiddle.net/Wm7q7/

Answer 5

.faq:nth-child(3) {
    border-bottom:none;
}

More info here