Seleziona nth-child tra più genitori

Ho il seguente markup:

  • one
  • two
  • three
  • four

Desidero modellare “uno” e “tre”.

Tuttavia, il markup potrebbe anche essere:

 
  • one
  • two
  • three
  • four

Ho provato a utilizzare il seguente CSS:

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

Tuttavia, come previsto, questo è lo styling del primo figlio di ogni ul . (Demo: http://jsfiddle.net/hTfVu/ )

    Come posso cambiare il mio CSS in modo da poter .foo target il 1 ° e il 3 ° li appartenenti a .foo ?

    Non puoi farlo solo con i selettori CSS. :nth-child() combinatori :nth-child() e fratelli sono limitati a figli / fratelli che condividono solo lo stesso genitore, come implicito nei loro nomi, e i selettori CSS non possono tenere conto di tali variazioni nella struttura genitore-figlio, né esiste qualcosa come :nth-grandchild() selettore :nth-grandchild() (even :nth-match() di Selectors 4 si limita agli elementi che condividono solo lo stesso genitore).

    Ovviamente con qualcosa come jQuery diventa banale: $('.foo li:eq(0), .foo li:eq(2)') Altrimenti dovrai contrassegnare esplicitamente il primo e il terzo elemento li usando classi o ID e quindi selezionarli.

    Potresti usare i selettori pari e dispari.

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