wake-up-neo.net

nicht: First-Child-Selector

Ich habe ein div-Tag, das mehrere ul-Tags enthält.

Ich kann CSS-Eigenschaften nur für das erste ul-Tag festlegen:

div ul:first-child {
    background-color: #900;
}

Meine folgenden Versuche, die CSS-Eigenschaften für jeden anderen 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 schreibe ich in CSS: "jedes Element außer dem ersten"?

csscss-selectors
647
OTAR

Eine der von Ihnen geposteten Versionen funktioniert eigentlich für alle modernen Browser (wobei CSS-Selektoren Level 3 werden unterstützt ):

div ul:not(:first-child) {
    background-color: #900;
}

Wenn Sie ältere Browser unterstützen müssen oder durch die Einschränkung von :not-Selektor behindert werden (dies akzeptiert nur einen einfachen Selektor als Argument), können Sie eine andere Methode verwenden:

Definieren Sie eine Regel, die einen größeren Geltungsbereich hat als Sie beabsichtigen, und "widerrufen" Sie sie dann bedingt, 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 */
}

Wenn Sie den Bereich einschränken, verwenden Sie den Standardwert für jedes von Ihnen festgelegte CSS-Attribut.

1135
Jon

Diese CSS2-Lösung ("any ul after another ul") funktioniert ebenfalls und wird von mehreren Browsern unterstützt.

div ul + ul {
  background-color: #900;
}

Im Gegensatz zu :not und :nth-sibling wird der benachbarte Gleichheitsselektor von IE7 + unterstützt.

Wenn Sie diese Eigenschaften nach dem Laden der Seite durch JavaScript geändert haben, sollten Sie einige bekannte Fehler in den Implementierungen von IE7 und IE8 überprüfen. Siehe diesen Link .

Für jede statische Webseite sollte dies einwandfrei funktionieren.

137
Alex Quinn

Da :not von IE6-8 nicht akzeptiert wird, würde ich Ihnen folgendes vorschlagen:

div ul:nth-child(n+2) {
    background-color: #900;
}

Sie wählen also jedes ul in seinem übergeordneten Element außer dem ersten.

Siehe Chris Coyers "Nützlich: n-te-Rezepte" Artikel für weitere nth-childBeispiele . 

65
ed1nh0
div li~li {
    color: red;
}

Unterstützt IE7

15
zloctb

not(:first-child) scheint nicht mehr zu funktionieren. Zumindest bei den neueren Versionen von Chrome und Firefox. 

Versuchen Sie stattdessen Folgendes: 

ul:not(:first-of-type) {}
5
Vinny Troia

Sie können einen beliebigen Selektor mit not verwenden.

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}
3
user11246010

Ich hatte kein Glück mit einigen der oben genannten,

Dies war die einzige, die tatsächlich für mich gearbeitet hat

ul:not(:first-of-type) {}

Dies funktionierte für mich, als ich versuchte, die erste Schaltfläche auf der Seite so anzuzeigen, dass sie nicht durch eine Rand-Links-Option beeinflusst wird.

dies war die Option, die ich zuerst ausprobiert habe, aber sie hat nicht funktioniert

ul:not(:first-child)

3
newtron54

Wie ich verwendet habe, ist ul:not(:first-child) eine perfekte Lösung.

div ul:not(:first-child) {
    background-color: #900;
}

Warum ist das perfekt, weil wir mit ul:not(:first-child) CSS auf innere Elemente anwenden können. Wie li, img, span, a-Tags usw.

Aber wenn andere Lösungen verwendet werden:

div ul + ul {
  background-color: #900;
}

und

div li~li {
    color: red;
}

und 

ul:not(:first-of-type) {}

und

div ul:nth-child(n+2) {
    background-color: #900;
}

Diese beschränken nur ul-Level-CSS. Nehmen wir an, wir können CSS nicht auf li als div ul + ul li anwenden.

Für Elemente der inneren Ebene funktioniert die erste Lösung perfekt. 

div ul:not(:first-child) li{
        background-color: #900;
    }

und so weiter ...

0
Gufran Hasan

Sie können Ihren Selektor mit :not verwenden, wie unten gezeigt, Sie können jeden Selektor innerhalb der :not() verwenden.

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}
0
Nasser