Ich habe ein "div"-Tag, das mehrere "ul"-Tags enthält.
Ich bin in der Lage, CSS-Eigenschaften nur für den ersten "ul"-Tag festzulegen:
div ul:first-child {
background-color: #900;
}
Meine folgenden Versuche, CSS-Eigenschaften für jedes andere "ul"-Tag außer dem ersten festzulegen, funktionieren jedoch nicht:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Wie kann ich in CSS schreiben: "each element, except the first"?
Eine der von Ihnen geposteten Versionen [funktioniert][1] tatsächlich in allen modernen Browsern (in denen CSS-Selektoren der Stufe 3 unterstützt werden):
div ul:not(:first-child) {
background-color: #900;
}
Wenn Sie ältere Browser unterstützen müssen oder wenn Sie durch die Einschränkung des :not
-Selektors behindert werden (er akzeptiert nur einen einfachen Selektor als Argument), können Sie eine andere Technik verwenden:
Definieren Sie eine Regel, die einen größeren Geltungsbereich hat als den, den Sie beabsichtigen, und heben Sie sie dann bedingt auf, indem Sie ihren Geltungsbereich auf das beschränken, was Sie beabsichtigen:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Verwenden Sie bei der Einschränkung des Geltungsbereichs den Standardwert für jedes CSS-Attribut, das Sie festlegen.
Diese CSS2-Lösung ("jede ul
nach einer anderen ul
") funktioniert ebenfalls und wird von mehr Browsern unterstützt.
div ul + ul {
background-color: #900;
}
Im Gegensatz zu :not
und :nth-sibling
wird der adjacent sibling selector von IE7+ unterstützt.
Wenn Sie JavaScript haben, das diese Eigenschaften nach dem Laden der Seite ändert, sollten Sie sich einige bekannte Fehler in den IE7- und IE8-Implementierungen dieser Funktion ansehen. Siehe diesen Link.
Für jede statische Webseite sollte dies perfekt funktionieren.
Da :not
von IE6-8 nicht akzeptiert wird, würde ich Ihnen folgendes vorschlagen:
div ul:nth-child(n+2) {
background-color: #900;
}
Man nimmt also jedes ul
in seinem Elternelement außer dem ersten.
Siehe Chris Coyer's "Nützliche :nth-child Rezepte" Artikel für weitere "nth-child" Beispiele.