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

Question

Wie würde ich alle bis auf das letzte Kind mit CSS3-Selektoren auswählen?

Um zum Beispiel nur das letzte Kind zu erhalten, müsste man div:nth-last-child(1) .

Answer 1

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

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

Answer 2

Machen Sie es einfach:

Sie können Ihren Stil auf alle Divs anwenden und das letzte Div 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/erinnern
• schnell zu erledigen
• browserfähig (IE9+, da es noch CSS3 ist)

Answer 3

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

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

Chris Coyier von CSS Tricks hat eine schöne :n-ter tester für diese.

Answer 4

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

Answer 5

Es gibt einen:not-Selektor in css3. Verwenden Sie :not() mit :last-child innerhalb, um alle Kinder außer dem letzten auszuwählen. Um zum Beispiel alle li in ul außer dem letzten li auszuwählen, verwenden Sie folgenden Code.

ul li:not(:last-child){   }