css - has - Seleccione nth-child en varios padres

selector css

Question

Tengo el siguiente marcado:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

Deseo diseñar "uno" y "tres".

Sin embargo, el marcado también podría ser:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

He intentado usar el siguiente CSS:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

Sin embargo, como se esperaba, esto es diseñar el primer hijo de cada ul . (Demostración: http://jsfiddle.net/hTfVu/ )

¿Cómo puedo cambiar mi CSS para que pueda apuntar al 1er y al 3er li pertenecen a .foo ?

Answer 1

No puedes hacer eso solo con los selectores de CSS. :nth-child() y los combinadores de hermanos están limitados a los niños / hermanos que comparten el mismo padre solamente, como implica su nombre, y los selectores de CSS no pueden dar cuenta de tales variaciones en la estructura padre-hijo, ni hay nada como un :nth-grandchild() selector :nth-grandchild() (incluso :nth-match() de Selectors 4 se limita solo a elementos que comparten el mismo elemento principal).

Por supuesto, con algo como jQuery se vuelve trivial: $(''.foo li:eq(0), .foo li:eq(2)'') De lo contrario, tendrá que marcar el primer y tercer elemento li explícitamente utilizando clases o ID , y luego seleccionarlos.

Answer 2

Puede usar los selectores par e impar.

li:nth-child(odd) {
  color: red;
}
li:nth-child(even) {
  color: white;
}