CSS: Der :not() Selektor

Definition und Nutzung

Mit dem CSS :not()-Selektor lassen sich gezielt Elemente von einer CSS-Regel ausschließen. Die Syntax ist sehr einfach:

:not(.class) {
  property: value;
}

So kann man beispielsweise Elemente, die eine spezielle Klasse haben, von einer Anweisung ausschließen:

<article>
  <p>Lorem Ipsum</p>
  <p class="different">Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</article>

p:not(.different) {
  font-size: 2em;
}

Diese Anweisung betrifft folglich nur den ersten und den letzten Paragraphen.

Anwendungsbeispiel

Ich habe oft den Fall, dass ich mehrere Paragraphen in einer Box habe, die alle einen margin-bottom bekommen sollen, außer dem letzten Element. Früher bin ich immer wie folgt vorgegangen:

.article p {
    margin-bottom: 20px;
}

Zuerst weist man allen Paragraphen den margin zu, bevor man ihn dann über die Pseudoklasse :last-child wieder cancelt. Die Alternative wäre noch, dass man dem letzten Element direkt im Markup die Klasse last mitgibt:

.article p:last-child {
    margin-bottom: 0;
}

Und genau das kann man mit dem :not-Selektor vereinfachen:

.article p:not(:last-child) {
    margin-bottom: 20px;
}

Hiermit wird der margin ausschließlich allen Paragraphen gegeben, die nicht das :last-child sind.

Ergebnis als CodePen:

(codepen: http://codepen.io/czehnter/pen/zoqmVY)