CSS: Kürzere Stylesheets mit dem :not Selektor schreiben

Bis vor einigen Wochen habe ich den :not Selektor eher selten verwendet. Dann habe ich diesen genialen Tweet von Matt Griffin gelesen.

So funktioniert der :not Selektor

Die CSS Pseudoklasse :not( argument ) passt auf Elemente, die nicht durch das Argument repräsentiert werden.

Folgende Anweisung fügt beispielsweise jedem HTML-Element einen roten Hintergrund hinzu, welches kein Absatz <p> ist.

:not(p) {
    background-color: red;
}

Stylesheets effizient verkürzen

Schauen wir uns mal ein Beispiel aus der Praxis an.

Im folgenden Code Snippet füge ich eine graue Linie hinter jedes Element einer Liste hinzu. Das letzte Element wird mittels :last-of-type davon ausgeschlossen.

li {
    border-bottom: 1px solid grey;
}

li:last-of-type {
    border-bottom: 0;
}

Durch den :not Selektor kannst du den oben stehenden Code deutlich reduzieren.

li:not(:last-of-type) {
    border-bottom: 1px solid grey;
}

Diese Kombination erscheint auf den ersten Blick abenteuerlich, aber wenn man sich erst einmal daran gewöhnt hat, macht diese Schreibweise wirklich Spaß.

Egal ob last-of-type, last-child oder p, halte die Augen nach weiteren Einsatzmöglichkeiten aufrecht.

Was die Browser Kompatibilität angeht musst du dir nicht viele Gedanken machen, der Internet Explorer ist ab der Version 9.0 dabei.

Teile diesen Beitrag