Der :not() Selektor wählt alle Elemente aus, welche dem Selektor nicht entsprechen.
Dies hilft dir besonders, wenn du bspw. vertikale Abstände zu Listeneinträgen hinzufügen möchtest. Über konventionelle Selektoren besitzt auch immer das letzte Element alle Eigenschaften.
Lass uns ein Beispiel ansehen:
<ul>
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
<li>Fünf</li>
</ul> Nun können wir einfach den Pseudo-Selektor :last-child in Kombination mit dem :not() Selektor verwenden:
ul li:not(:last-child) {
margin-bottom: 1rem;
} Mit diesen Selektor kannst du nun alle Elemente ansprechen, welche nicht das letzte “Child” der Liste sind.
