Ik heb een div
tag met daarin verschillende ul
tags.
Ik ben in staat om CSS eigenschappen in te stellen voor alleen de eerste ul
tag:
div ul:first-child {
background-color: #900;
}
Echter, mijn volgende pogingen om CSS eigenschappen in te stellen voor elke andere ul
tag behalve de eerste, werken niet:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Hoe kan ik in CSS schrijven: "elk element, behalve het eerste"?
Een van de versies die je gepost hebt [werkt eigenlijk][1] voor alle moderne browsers (waar CSS selectors level 3 ondersteund worden):
div ul:not(:first-child) {
background-color: #900;
}
Als u oudere browsers moet ondersteunen, of als u gehinderd wordt door de :not
selector's beperking (het accepteert alleen een eenvoudige selector als argument) dan kunt u een andere techniek gebruiken:
Definieer een regel die een groter bereik heeft dan wat je van plan bent en "revoke" het dan voorwaardelijk, waarbij je het bereik beperkt tot wat je wel van plan bent:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Gebruik bij het beperken van het bereik de standaardwaarde voor elk CSS attribuut dat u instelt.
Deze CSS2 oplossing ("any ul
after another ul
") werkt ook, en wordt door meer browsers ondersteund.
div ul + ul {
background-color: #900;
}
In tegenstelling tot :not
en :nth-sibling
, wordt de adjacent sibling selector wel ondersteund door IE7+.
Als u JavaScript deze eigenschappen laat wijzigen nadat de pagina geladen is, moet u eens kijken naar enkele bekende bugs in de IE7 en IE8 implementaties hiervan. Zie deze link.
Voor elke statische webpagina zou dit perfect moeten werken.
Aangezien :not
niet wordt geaccepteerd door IE6-8, zou ik u dit voorstellen:
div ul:nth-child(n+2) {
background-color: #900;
}
Dus je kiest elke ul
in zijn parent element uitgezonderd de eerste.
Zie Chris Coyer's "Useful :nth-child Recipes" artikel voor meer nth-child
voorbeelden.