Seleccione nth-child en varios padres

Tengo el siguiente marcado:

  • one
  • two
  • three
  • four

Deseo diseñar “uno” y “tres”.

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

 
  • one
  • two
  • three
  • four

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 ?

No puedes hacer eso solo con los selectores de CSS. :nth-child() y los combinadores de hermanos están limitados a 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.

Puede usar los selectores par e impar.

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