CSS-Pseudoklasse :not – Kraft der Negation

Montag, 26 April 2010 09:16 MET

Thema:
Webgestaltung  
Stichworte:
 
dieser Artikel  
Foto: Mann mit entrüstetem Gesichtsausdruck zeigt in die Kamera
CSS-Pseudoklasse :not – Kraft der Negation [hyperkontext | Weblog]
Kommentare 1, Bezugnahme 1

CSS3 bietet mit der Pseudoklasse :not() die Möglichkeit der Negation. Leider bleibt der Internet Explorer – derzeit bis einschließlich der aktuellen Version 8 – damit außen vor.

Eine Anwendungsart besteht noch als Hack. Programme, die nicht auf Höhe der Zeit sind, werden gezielt ausgeschlossen.

Auch zur Fehlersuche eignet sich die Pseudoklasse :not() gut.

Möglichkeit der Verneinung

Die Verneinung ist in unseren Zeiten nicht besonders populär und gehört schon gar nicht zum Repertoire der Opportunisten. Auch für Webdesigner war sie in CSS bisher nicht vorgesehen. Ein Zeichen der Zeit?

Die Zeiten ändern sich jedoch, zumindest in der Webgestaltung.

Cascading Style Sheets (CSS) in – noch nicht offizieller – Version 3 bietet mit der Pseudoklasse :not nun die Möglichkeit der Negation, quasi die Umkehrung einer Bedingung. Schon fast alle gängigen Browser spielen mit.

Wie wir an einigen Beispielen sehen, eröffnen sich praktische Möglichkeiten der Anwendung:

Beispiele mit :not()

  • Ein häufiger Wunsch ist, fokussierten Eingabefeldern eine sichtbare Kennung zuzuweisen, jedoch nicht den Schaltflächen. Mit Negation lässt sich das in einer Anweisung erledigen:
    input:not([type="submit"]):not([type="button"]):focus, textarea:focus { outline: 3px ridge blue; }
  • Mit folgender Angabe werden alle Hyperlinks, die auf eine andere als die eigene Site verweisen, mit einem Pfeil danach gekennzeichnet:
    a[href^="http://"]:not([href*="mydomain.tld"]):after { content: "\00A0\2197"; }
  • Hiermit würde nur der erste und der letzte Punkt einer geordneten Liste die sichtbare Nummerierung erhalten:
    ol li:not(:first-child):not(:last-child) { list-style:none; }
  • In diesem Beispiel verdoppelt sich die Größe des ersten Buchstabens eines Absatzes, der unmittelbar auf eine Überschrift zweiten Grades folgt und sich nicht innerhalb eines <div> mit der ID »foo« oder der Klasse »bar« befindet:
    div:not(#foo):not(.bar) h2+p::first-letter { font-size:200%; }

IE spielt nicht mit

Mit Absicht zeige ich hier Beispiele, die sich auf die Optik beziehen und keine gravierenden Beeinträchtigungen in der Benutzung haben sollten, wenn ein Browser diese Pseudoklasse nicht interpretiert.

Leider bleibt nämlich der Internet Explorer – derzeit bis einschließlich der aktuellen Version 8 – damit außen vor. Die vermutlich mit Jahresende 2010 oder Anfang 2011 erhältliche finale Version 9 sollte auch diesen Rückstand aufholen.

Alle anderen gängigen Browser spielen schon seit einigen Versionen diese CSS-Pseudoklasse :not() souverän.

Ältere Browser gezielt ausschließen

Eine Anwendungsart besteht noch als Hack. Programme, die nicht auf Höhe der Zeit sind, werden gezielt ausgeschlossen, aus welchen Gründen auch immer. 

body:not(#foo) div.bar {
 display:none;
}

#liste:not(:target) {display:none;}
#liste:target {display:block;}

Mit erster Zeile des Beispieles könnte zum Beispiel ein Texthinweis für ältere Programme in modernen Browsern gar nicht angezeigt werden.

Die weiteren zwei Zeilen zeigen, wie Programme die :target nicht verstehen, mit weiteren Anweisungen in diesem Zusammenhang nicht verwirrt werden. Das Zusammenspiel mit :target und :not(:target) behandelte ich bisher schon zwei Mal auf diesem Blog:

Fehler suchen mit Negation

Auch als Arbeitswerkzeug zur Fehlersuche und für Texteditoren eignet sich die Pseudoklasse :not().

Beispielsweise können fehlende Attribute bei Überarbeitung einer CSS-Datei aufgespürt werden oder damit Warnhinweise für Redakteurinnen nach Texterstellung in der internen Voransicht gezeigt werden. 

img:not([alt]),
a:not([href]),
a:not([href^="http"]),
table[summary=""],
table:not([summary]) {
 outline: 2px solid red !important;
}
html:not([lang]) {
 border: 6px solid black !important;
}
Abschnitt 1 von 1

Verweise zum Thema

Externe Verweise dieses Artikels wurden zuletzt am 20. Dezember 2011 auf Relevanz geprüft.

Datum:
veröffentlicht am 26 April 2010, 09:16 MET.
Artikel:
CSS-Pseudoklasse :not – Kraft der Negation [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/257
Thema:
Webgestaltung 
Stichworte:
 
Reaktionen:
Kommentare 1, Bezugnahme 1

Kommentare (1) und externe Bezugnahmen (1) ansehen

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

« neuerer Artikel
April 2010 im Kontext
älterer Artikel »
Buchrezension: Der Informationscrash von Max Otte