nicht: Erstkind-Selektor

811

Ich habe ein divTag, das mehrere ulTags enthält.

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

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

Meine folgenden Versuche, CSS-Eigenschaften für jedes andere ulTag 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: "jedes Element außer dem ersten"?

Oto Shavadze
quelle

Antworten:

1414

Eine der Versionen , die Sie geschrieben tatsächlich funktioniert für alle modernen Browser (wo CSS - Selektoren Level 3 werden unterstützt ):

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

Wenn Sie ältere Browser unterstützen müssen oder wenn Sie durch die Einschränkung des :notSelektors behindert werden (es wird nur ein einfacher Selektor als Argument akzeptiert ), können Sie eine andere Technik verwenden:

Definieren Sie eine Regel, die einen größeren Geltungsbereich hat als beabsichtigt, und "widerrufen" Sie sie dann unter bestimmten Bedingungen, wobei Sie den 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 zum Einschränken des Bereichs den Standardwert für jedes CSS-Attribut, das Sie festlegen.

Jon
quelle
Wissen Sie genau, auf welchen Versionen dies nicht unterstützt wird?
Simon_Weaver
9
@ Simon_Weaver: In der Praxis unterstützt alles außer IE <9 dies. Eine großartige Ressource, um diese Art von Informationen zu erhalten, ist caniuse.com .
Jon
2
Hmm .. achten Sie auf die Einschränkungen der ersten Lösung: caniuse.com/#feat=css-not-sel-list Die zweite klang für mich vernünftiger. Vielen Dank!
Iorrah
@iorrah Ihr Caniuse-Link ist für eine Liste von Selektoren, und ja, die Unterstützung ist immer noch sehr begrenzt. Das OP verwendet keine Liste von Selektoren. Daher denke ich, dass https://caniuse.com/#feat=css-sel3 besser geeignet ist und über die Tage von IE8 hinaus großartige Unterstützung bietet.
secretwep
Dies funktioniert auch ohne das div-Element am Anfang in Chrom.
Achraf JEDAY
158

Diese CSS2-Lösung ("jede ulnach der anderen ul") funktioniert ebenfalls und wird von mehr Browsern unterstützt.

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

Im Gegensatz zu :notund :nth-siblingwird der benachbarte Geschwister-Selektor von IE7 + unterstützt.

Wenn JavaScript diese Eigenschaften nach dem Laden der Seite ändert, sollten Sie sich einige bekannte Fehler in den IE7- und IE8- Implementierungen ansehen . Siehe diesen Link .

Für jede statische Webseite sollte dies perfekt funktionieren.

Alex Quinn
quelle
4
@Leven: Dieser Quirksmode-Link sagt, dass er in IE7 funktionieren sollte, aber nur statisch. Wenn Ihr JS ein anderes Element davor platziert, wird es möglicherweise nicht korrekt aktualisiert. Ist das das Problem, das Sie gesehen haben?
Alex Quinn
Es könnte erwähnenswert sein, dass in einer Folge von Elementen wie: ul ul div ul(wo diese Elemente Geschwister sind) nur die zweite ul ausgewählt wird, da die letzte keine ulvorherige vor sich hat
Brian H.
79

Da :notdies 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 ulElement in seinem übergeordneten Element aus, mit Ausnahme des ersten .

Weitere Beispiele finden Sie in Chris Coyers Artikel "Nützlich: Rezepte für das n-te Kind" .nth-child

ed1nh0
quelle
Wer nutzt eigentlich noch IE6-8 im Jahr 2019?
Oldboy
15
In Anbetracht der Antwort war von 2013?
Aasukisuki
18
div li~li {
    color: red;
}

Unterstützt IE7

zloctb
quelle
14

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

Versuchen Sie stattdessen Folgendes:

ul:not(:first-of-type) {}
Vinny Troia
quelle
6
Sie arbeiten beide, haben aber unterschiedliche Bedeutungen. ul:not(:first-child)bedeutet wörtlich "jedes ulElement, das nicht das erste Kind seines Elternteils ist", daher stimmt es nicht einmal mit dem ersten überein, ulwenn ihm ein anderes Element ( p, eine Überschrift usw.) vorangestellt ist . Im Gegenteil ul:not(:first-of-type)bedeutet "jedes ulElement außer dem 1. ulim Container". Sie haben Recht, dass OP wahrscheinlich das letztere Verhalten benötigt hat, aber Ihre Erklärung ist eher irreführend.
Ilya Streltsyn
9

Sie können jeden Selektor mit verwenden not

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)){}
Nasser Ali Karimi
quelle
4

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

Dies war der einzige, der tatsächlich für mich arbeitete

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

Dies funktionierte für mich, als ich versuchte, die erste Schaltfläche auf der Seite anzuzeigen, die nicht durch eine Option am linken Rand beeinflusst wurde.

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

ul:not(:first-child)

newtron54
quelle
4

Sie können Ihren Selektor :notwie folgt verwenden. Sie können jeden Selektor innerhalb des verwenden:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

Sie können auch :notohne übergeordneten Selektor verwenden.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Mehr Beispiele

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*/
}
Nasser Ali Karimi
quelle
0

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

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

Warum ist dies perfekt, weil ul:not(:first-child)wir mit CSS auf innere Elemente anwenden können? Wie li, img, span, aTags etc.

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 CSS auf ul-Ebene. Angenommen, wir können CSS nicht lials "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 ...

Gufran Hasan
quelle