CSS/Selektoren/Pseudoklasse/not
Aus SELFHTML-Wiki
< CSS | Selektoren | Pseudoklasse
Die Pseudoklasse :not() erwartet als Argument einen einfachen Selektor, mit Ausnahme der Pseudoklasse :not() selbst. Sie spricht dann alle diejenigen Elemente an, auf die das Argument nicht zutrifft.
Beispiel
So sieht's aus
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-Beispiel: Pseudoklasse :not()</title>
<style>
a:not([href*="example."]) { background: red; }
</style>
</head>
<body>
<h1>Die Pseudoklasse :not()</h1>
<ul>
<li><a href="http://example.com/">Beispiellink</a></li>
<li><a href="http://example.com/example.pdf">ein PDF-Dokument</a></li>
<li><a href="http://wiki.selfhtml.org/">Das selfhtml wiki</a></li>
<li><a href="HTTPS://EXAMPLE.ORG/WIKI/EXAMPLE.PDF/">Groß- und Kleinschreibung beachten!</a></li>
</ul>
</body>
</html>
In diesem Beispiel werden alle Link-Elemente, deren href-Attribut nicht die Zeichenkette „example.“ enthält mit einem roten Hintergrund versehen.
Beispiel
#inhalt :not(p) { color: red }
In diesem Beispiel würden alle Kindelemente des Elementes mit der ID „inhalt“, die keine Absätze sind, eine rote Schriftfarbe erhalten. Dies ist etwa sinnvoll, wenn dieses Element nur Überschriften, Absätze und Bilder enthält.
