Как использовать селекторы CSS3 для выбора каждого четного элемента

Question

Итак, это текущая структура кода:

<section>
    <article>
        <p>Title</p>
        <p>Content</p>
    </article>

    <article>
        <p>Title</p>
        <p>Content</p>
    </article>

    <article>
        <p>Title</p>
        <p>Content</p>
    </article>
</section>

Как получить первый и третий заголовок для float:left, а второй заголовок для float:right ...?

Я попробовал это:

section article p:first-child:nth-child(even){
    float:right;
}

Но мне не повезло ...: - (

Answer 1

section article p:first-child {
    float: right;
}
section article:nth-child(even) p:first-child {
    float: left;
}

Answer 2

Я думаю, что вы хотите, чтобы это:

section article:nth-child(odd) p:first-child {
    float: left;
}

section article:nth-child(even) p:first-child {
    float: right;
}

Вы фактически выбрали первого ребенка <p>, который также является четным, что, конечно, никогда не может произойти.

Answer 3

Просто измените это на

section article:nth-child(even){
    float:right;
}

http://jsfiddle.net/jasongennaro/cFTDj/3/