Die Pseudoklasse :not negiert einen innewohnenden Selektor. Die Syntax ist genau wie bei anderen Pseudoklassen die folgende:

:not(selector) { ... }

Beispiel

HTML:

<div id="example">
  <div></div><div></div><div></div><div></div>
</div>

CSS:

#example div {
  height:100px;
  display: block;
  border: 1px solid #F00;
  margin: 5px; padding: 5px;
}

div:not(:first-child) {
  width: 100px;
  display: inline-block;
  border: 1px dotted #CCC;
}

Natürlich könnte man in diesem Fall auch einfach dem ersten Element die Werte separat zuweisen. Dieser Fall soll aber zeigen, dass auch Pseudoklassen negiert werden können.

Nächster Beitrag Vorheriger Beitrag