Question

I need to row in a matrix of 3×3 and after each wrapper div box i need to show a vertical line. If i put my code in a repeater control of loop to generate this from code then this creates another issue it adds vertical line after every box.

I was trying to hide 3rd, 6th, 9th div with class name horizontal-line so that vertical line wont appear.

I am not sure how i can change below script to change the nth elements inside

Content-area div or class

$('.content-area .horizontal-line:nth-child(6n+1)').css('display', 'none');

I am looking for jquery Solution(Update)
Example on jsFiddle

<div id="content-area">
    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

        <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  

    <div class="article-wrapper">
        <div id="article">
            <div id="title"></div>
           <div id="details"></div>
        </div>
    </div>
    <div class="horizontal-line"></div>  
</div>

Answer 1

Like this?

.content-area .horizontal-line:nth-child(3n){
    display:none;
}