Проблема с нечетными/четными дочерними элементами в nth-child

У меня есть такой веб-сайт:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="article_style.css" />
</head>
<body>
    <div class="section">
    <!--<h1>header</h1>-->
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
    </div>
    <div class="section">
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
        <div>
            paragraph
        </div>
    </div>
</body>
</html>

и это CSS:

div.section
{
    border: 1px solid black;
}
div.section div:nth-child(even)
{
    color: Green;
}
div.section div:nth-child(odd)
{
    color: Red;
}

И это результат:

Это нормально, потому что я краснею для нечетного div и зеленого цвета даже для каждого. Но когда я добавляю заголовок в начале первого раздела (прокомментированный код в образце), я получаю следующее:

Я не хочу этого. Я хочу, чтобы у него было как раньше, но только с заголовком в первом разделе. Итак, сначала заголовок, а затем красный абзац.

Ответ 1

Используйте nth-of-type вместо:

Live Demo

div.section
{
    border: 1px solid black;
}
div.section div:nth-of-type(even)
{
    color: Green;
}
div.section div:nth-of-type(odd)
{
    color: Red;
}

Ответ 2

div > :nth-child(3)     the third child of a div element
div > :nth-child(even)  every even child of a div element
div > :nth-child(odd)   every odd child of a div element
div > :nth-child(3n)    every third child of a div element