Ho un tag div
che contiene diversi tag ul
.
Sono in grado di impostare le proprietà CSS solo per il primo tag ul
:
div ul:first-child {
background-color: #900;
}
Tuttavia, i miei seguenti tentativi di impostare le proprietà CSS per ogni altro tag ul
tranne il primo non funzionano:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Come posso scrivere in CSS: "ogni elemento, tranne il primo"?
Una delle versioni che hai postato [funziona effettivamente][1] per tutti i browser moderni (dove i selettori CSS livello 3 sono supportati):
div ul:not(:first-child) {
background-color: #900;
}
Se hai bisogno di supportare i browser legacy, o se sei ostacolato dalla limitazione del selettore `:not] (accetta solo un selettore semplice come argomento) allora puoi usare un'altra tecnica:
Definisci una regola che ha una portata maggiore di quella che intendi e poi "revoca" condizionalmente, limitando la sua portata a ciò che intendi:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Quando limitate la portata usate il valore predefinito per ogni attributo CSS che state impostando.
Anche questa soluzione CSS2 ("qualsiasi ul
dopo un altro ul
") funziona, ed è supportata da più browser.
div ul + ul {
background-color: #900;
}
A differenza di :not
e :nth-sibling
, il selettore adjacent sibling selector è supportato da IE7+.
Se hai JavaScript cambia queste proprietà dopo il caricamento della pagina, dovresti guardare alcuni bug noti nelle implementazioni di IE7 e IE8 di questo. Vedere questo link.
Per qualsiasi pagina web statica, questo dovrebbe funzionare perfettamente.
Poiché :not
non è accettato da IE6-8, vi suggerirei questo:
div ul:nth-child(n+2) {
background-color: #900;
}
Quindi scegli ogni ul
nel suo elemento genitore eccetto il primo.
Fate riferimento all'articolo di Chris Coyer "Useful :nth-child Recipes" per altri nth-child
esempi.