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