Problema con elementos hijos pares / impares en nth-child

Question

Mar 04, 2011, 04:00 PM

Problema con elementos hijos pares / impares en nth-child

Tengo un sitio web como este:

<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>

y esto es CSS:

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

Y este es el resultado

Esto está bien porque me pongo rojo por div impar y verde por par encad sección. Pero cuando agrego encabezado al comienzo de la primera sección (código comentado en la muestra) obtengo esto:

No quiero eso. Quiero que tenga como antes, pero solo con un encabezado en la primera sección. Entonces, en el primer encabezado y luego en el párrafo rojo.