not:first-child Selektor

Question

not:first-child Selektor

Gefragt el 5 de September, 2012: Wann wurde die Frage gestellt
1254152 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe eine div Tag mit mehreren ul Tags.

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

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

Meine folgenden Versuche, CSS-Eigenschaften füreinander festzulegen, sind jedoch ul Tag, außer dem ersten, funktionieren 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"?

Gefragt el 5 de September, 2012 von Oto Shavadze

Answer 1

5 Antworten

Answer 2

1901voto

Jon Punkte 411383

Eine der von Ihnen eingestellten Versionen funktioniert tatsächlich für alle modernen Browser (wenn CSS-Selektoren Stufe 3 sind unterstützt ):

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

Wenn Sie Legacy-Browser unterstützen müssen oder wenn Sie durch die :not des Selektors Begrenzung (es akzeptiert nur eine Einfacher Selektor als Argument), dann können Sie eine andere Technik 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 */
}

Bei der Einschränkung des Geltungsbereichs verwenden Sie die Standardwert für jedes CSS-Attribut, das Sie einstellen.

Beantwortet el 5 de September, 2012 von Jon (411383 Punkte )

Answer 3

183voto

Alex Quinn Punkte 3733

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

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

Anders als :not y :nth-sibling die Selektor für benachbarte Geschwister wird von IE7+ unterstützt.

Wenn Sie eine JavaScript diese Eigenschaften nach dem Laden der Seite ändert, sollten Sie sich einige bekannte Fehler in der IE7 y IE8 Implementierungen davon. Siehe diesen Link .

Für jede statische Webseite sollte dies perfekt funktionieren.

Beantwortet el 19 de Marsch, 2013 von Alex Quinn (3733 Punkte )

Answer 4

99voto

ed1nh0 Punkte 1432

Seit :not wird nicht akzeptiert von IE6-8 würde ich Ihnen Folgendes empfehlen:

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

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

Siehe Chris Coyer's "Nützliche :nth-child-Rezepte" Artikel für mehr nth-child ejemplos .

Beantwortet el 22 de Februar, 2013 von ed1nh0 (1432 Punkte )

Answer 5

48voto

wahsandaruwan Punkte 517

Sie können die Pseudoklasse "first-child" innerhalb der Pseudoklasse "not()" verwenden.

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

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Alternative Möglichkeiten,

Mit "nth-child()" wird die n-te Anzahl von Kindern ausgewählt.

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

<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo Classes</title> </head> <body> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> </ul> <ul> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> </ul> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html>

Mit "nth-of-type()" wird die n-te Anzahl von Elementen des Elternteils.

div ul:not(:nth-of-type(1)){
    background-color: #900;
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Mit "nth-last-child()" wird die n-te Anzahl von Kindern, beginnend mit dem letzten Kind, ausgewählt. Wenn Sie h

div ul:not(:nth-last-child(4)){ background-color: #900; }

<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo Classes</title> </head> <body> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> </ul> <ul> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> </ul> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html>
W

div ul:not(:nth-last-of-type(4)){ background-color: #900; }

<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo Classes</title> </head> <body> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> </ul> <ul> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <ul> <li><a href="#">Services</a></li> <li><a href="#">Downloads</a></li> </ul> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html>

T

Beantwortet el 28 de April, 2021 von wahsandaruwan (517 Punkte )

Answer 6

27voto

Scott Summers Punkte 607

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) {}

Beantwortet el 19 de August, 2017 von Scott Summers (607 Punkte )

not:first-child Selektor

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

not:first-child Selektor

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: