Jetzt Kontakt aufnehmen

For coders TYPO3 Tech Corner

Kennst du schon den :not() CSS Selektor?

Kennst du schon den :not() CSS Selektor?

Der :not() Selektor hatte einen relativ großen Einfluss darauf, wie ich CSS-Code heute schreibe. Wie du dir mit diesem Selektor einige Zeit sparst, erfährst du in diesem kurzen Artikel.

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. 

Zurück

Kennst du das: Immer nur schnell schnell?

Wie wäre es einmal mit Zeit und Respekt für Codequalität? Arbeiten im Team? Automatisierte Tests?

Komm zu uns