wake-up-neo.com

Wie kann ich alle Kinder eines Elements mit Ausnahme des letzten Kindes auswählen?

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

Um beispielsweise nur das letzte Kind zu erhalten, wäre div:nth-last-child(1).

csscss-selectorscss3
291
RyanScottLewis

Sie können die Pseudoklasse negation :not() gegen die :last-child Pseudoklasse verwenden. Da CSS Selectors Level 3 eingeführt wurde, funktioniert es nicht in IE8 oder darunter:

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

Mach es einfach:

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

zum Beispiel inCSS:

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

oder inSCSS:

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}
  • einfach zu lesen/merken
  • schnell auszuführen
  • Browser-kompatibel (IE9 +, da es immer noch CSS3 ist)
82
Sebastien Horin

Nick Cravers Lösung 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 Nice : nth Tester gemacht.

26
Robin B

Wenn IE9 kommt, wird es einfacher. In den meisten Fällen können Sie das Problem jedoch auf ein Problem umstellen: first-child und die gegenüberliegende Seite des Elements (IE7 +).

22
Nicholas Wilson

Die Verwendung der Nick Cravers-Lösung mit selectivizr ermöglicht eine Browser-Lösung (IE6 +)

10
delphi

um Elemente aus dem letzten Bereich zu finden, verwenden Sie

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