Jeg har en div
-tag som inneholder flere ul
-tagger.
Jeg kan bare angi CSS-egenskaper for den første ul
-taggen:
div ul:first-child {
background-color: #900;
}
Imidlertid fungerer ikke følgende forsøk på å angi CSS-egenskaper for hver annen ul
-tag unntatt den første:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Hvordan kan jeg skrive i CSS: "hvert element, bortsett fra det første"?
En av versjonene du la ut [fungerer faktisk][1] for alle moderne nettlesere (der CSS-selektorer på nivå 3 er støttet):
div ul:not(:first-child) {
background-color: #900;
}
Hvis du trenger å støtte eldre nettlesere, eller hvis du blir hindret av :not
-selektoren begrensning (den godtar bare en enkel selektor som argument), kan du bruke en annen teknikk:
Definer en regel som har større rekkevidde enn det du har til hensikt, og "opphev" den deretter betinget, slik at rekkevidden begrenses til det du har til hensikt:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Når du begrenser omfanget, bruker du standardverdien for hvert CSS-attributt du angir.
Denne CSS2-løsningen (en hvilken som helst "ul" etter en annen "ul") fungerer også, og støttes av flere nettlesere.
div ul + ul {
background-color: #900;
}
I motsetning til :not
og :nth-sibling
støttes adjacent sibling selector av IE7+.
Hvis du har JavaScript som endrer disse egenskapene etter at siden er lastet inn, bør du se på noen kjente feil i IE7- og IE8-implementeringene av dette. Se denne lenken.
For alle statiske nettsider bør dette fungere perfekt.
Siden :not
ikke aksepteres av IE6-8, vil jeg foreslå dette:
div ul:nth-child(n+2) {
background-color: #900;
}
Så du velger hvert ul
i det overordnede elementet unntatt det første.
Se Chris Coyers "Useful :nth-child Recipes" artikkel for flere nth-child
eksempler.