Wie kann ich alle untergeordneten Elemente eines Elements außer dem letzten untergeordneten Element auswählen?

371

Wie würde ich alle außer dem letzten Kind mit CSS3-Selektoren auswählen?

Zum Beispiel wäre es nur das letzte Kind zu bekommen div:nth-last-child(1).

css-selectors css

— RyanScottLewis
quelle

689

Sie können die Negationspseudoklasse:not() gegen die :last-childPseudoklasse verwenden . Mit der Einführung von CSS Selectors Level 3 funktioniert es nicht in IE8 oder niedriger:

:not(:last-child) { /* styles */ }

— Nick Craver
quelle

wird dies so wie es ist verwendet? Ohne irgendetwas vor dem ersten Doppelpunkt?

— Johny, warum

Sie würden dies an Ihren normalen Basis-Selektor anhängen ( divim OP-Beispiel)

— Dallas

2

Für Benutzer von SASS können Sie &:not(:last-child) { /* styles * }das Element verwenden, das Sie beeinflussen möchten.

— Martin James

100

Mach es einfach:

Sie können Ihren Stil auf alle Div anwenden und den letzten neu initialisieren mit : last-child :

Zum Beispiel in CSS :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

oder in SCSS :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

leicht zu lesen / zu merken
schnell auszuführen
Browserkompatibel (IE9 +, da es immer noch CSS3 ist)

— Sebastien Horin
quelle

6

Zumindest für mich hat dies einen schlechten Code-Geruch. Sie wenden wissentlich eine CSS-Regel auf ein Element an, das Sie nicht möchten, und versuchen dann, eine weitere Ebene zusammenzusetzen, um sie rückgängig zu machen. Für mich ist das ein schlechter Codegeruch. Ich befürchte, dass diese Art der CSS-Codierung dazu führen kann, dass CSS immer schwieriger zu warten ist. Mit anderen Worten, Sie erstellen Spaghetti-Code-CSS.

— Alexander Bird

1

Dies könnte auch funktionieren, aber das Problem ist, wenn Sie viele CSS-Stile wie (Rand, Farbe, Schriftgröße usw.) haben, müssen Sie den CSS-Stil erneut auf: last-child initialisieren. Die geeignete Lösung ist also: nicht (: letztes Kind)

— davecar21

33

Die Lösung von Nick Craver funktioniert, aber Sie können auch Folgendes verwenden:

:nth-last-child(n+2) { /* Your code here */ }

Chris Coyier von CSS Tricks hat dafür einen netten : n-ten Tester gemacht.

— Robin B.
quelle

Mozilla hat eine gute Definition von : n-letztes Kind

— Clint Pachl

1

Einige Leute sagen, dass :notPseudo sehr teuer ist. Es könnte daher eine gute Idee sein, dies nach Möglichkeit zu vermeiden.

— Neurotransmitter

22

Wenn IE9 kommt, wird es einfacher sein. In den meisten Fällen können Sie das Problem jedoch auf ein Problem umstellen, das Folgendes erfordert: Erstes Kind und Stil der gegenüberliegenden Seite des Elements (IE7 +).

— Nicholas Wilson
quelle

10

Die Verwendung der Lösung von Nick Craver mit Selectivizr ermöglicht eine browserübergreifende Lösung (IE6 +).

— Delphi
quelle

1

Verwenden Sie, um Elemente von last zu finden

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

— Avinash Malhotra
quelle

1

Die Lösung von Nick Craver gab mir das, was ich brauchte, aber um es für diejenigen, die CSS-in-JS verwenden, explizit zu machen:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

— maddRobot
quelle

1

.nav-menu li:not(:last-child){
    // write some style here
}

Dieser Code sollte den Stil auf alle anwenden

außer dem letzten Kind

— RyanGonzalezUSA
quelle