I need help regarding nth-child's

Question

Was never good with nth-child, other than :first-child and :last-child, but I need some help creating this type of layout:

Each "post" will be wrapped in a div with class called .summary-item. I'm using a fluid layout and have my site's content width to max-width: 1020px.

Can anyone help me out here? Much appreciated!

<div class="summary-item">
First Post
</div>

<div class="summary-item">
Second
</div>

<div class="summary-item">
Third
</div>

<div class="summary-item">
Fourth
</div>

<div class="summary-item">
Fifth
</div>

Answer 1

I went with slightly different markup (final result):

<article>
    <header>
        <h3>First Post</h3>
    </header>
</article>
<!-- fill in the gap -->
<article>
    <header>
        <h3>Fifth Post</h3>
    </header>
</article>​

And the following rules:

article {
    height: 10em;
    box-sizing: border-box;
    border: 5px solid #FFF;
}

article:nth-child(5n+1) { 
    width: 70%;
}

article:nth-child(5n+2) { 
    width: 30%; 
    margin: -10em 0 0 70%;
}

article:nth-child(5n+3) {
    width: 50%;
}

article:nth-child(5n+4) {
    width: 50%;
    margin-right: 50%;
}

article:nth-child(5n+5) {
    width: 50%;
    height: 20em;
    margin: -20em 0 0 50%;
}

Which gives me the layout presented in your concept image.

Fiddle: http://jsfiddle.net/ZLVV2/2/

Answer 2

Since you have a period of 5 ("Once the fifth post is done I need the whole structure to repeat"), all of your nth-child calls will be based on 5n. After that it's just addition:

:nth-child(5n+1) {/* first block */}
:nth-child(5n+2) {/* second block */}
:nth-child(5n+3) {/* third block */}
:nth-child(5n+4) {/* fourth block */}
:nth-child(5n+5) {/* fifth block - could also be :nth-child(5n)
                            but the +5 improves readability */}