Sep 2009

CSS3-Selektoren: Pseudoklassen, Pseudolinks und Pseudoelemente

 
 

CSS3 hat die Liste der Pseudoelemente um Selektoren wie :nth-child(even) erweitert. Damit wird es z.B. möglich, aufeinander folgende Tabellenreihen abwechselnd mit einer Hintergrundfarbe zu belegen.

Mit :last-child lässt nicht nun auch ein letztes Element in einer Liste erreichen – wenn die Liste für die Navigation formatiert ist, ist dieser Selektor ein willkommenener Helfer.

Auch :empty und :not helfen, zahlreiche Javascript-Erweiterungen von CSS einzusparen.

Pseudoklassen Bezeichnung / Bschreibung Beispiel IE
E:not alle Elemente, die dem Selektor nicht entsprechen td.small:not { color: navy } X
E:target URL mit Sprungadresse a:target { color: navy } X
E:empty ein Element ohne Inhalt td:empty { background: gray } X
E:nth-child filtert das n-te Kindelement eines HTML-Elements tr:nth-Child(2) { color: rosybrown } X
E:nth-last-child wie nth-child, aber beginnt am Ende tr:nth-last-Child(2) { color: purple } X
E:nth-of-type wie nth-child, wirkt nur bei Elementen eines Tpps p:nth-of-type(odd) { color: purple } X
E:nth-last-of-type wie nth-of-type, aber beginnt am Ende p:nth-of-type(odd) { color: purple } X
E:last-child wie :first-child, aber filtert vom letzten Element an li:last-child { border-bottom: 1px solid gray } X
E:first-of-type, E:last-of-type das erste bzw. letzte Element innerhalb seines Elternelements td:last-of-type { background: silver } X
E:only-child Elemente, die das einzige Kind ihres Elternelements sind strong:only-child { color: red; } X
E:only-of-type Elemente, die das einzige Kind mit diesem Selektor innerhalb ihres Elternelements sind a.aktuell:only-of-type { color: red; } X
:enabled, :disabled, :checked Selektoren für Eingabefelder in Formularen input:checked { background: green; } X

Die neuen Selektoren ersparen Schreibaufwand im Stylesheet beziehungsweise Scriptcode – insbesondere Inhalten, die dynamisch aus Skripten generiert werden wie Tabellen und Listen –, aber sie werden von IE 7 / IE 8 noch nicht unterstützt.

:nth-child(odd) und nth-child(even)

Tabellenzeilen lassen sich mit einem geringen Aufwand abwechselnd einfärben – das erleichtert in langen Tabellen die Lesbarkeit. 

.exc tr:nth-child(odd) { background: lavender; }
.exc tr:nth-child(even) { background: thistle; }
…
<table class="exc">
Klassen- und Id-SelektorenDie ältesten und zuverlässigsten Selektoren
Pseudoelemente CSS1 und CSS2 Insbesondere für die Gestaltung von Links in bestimmten Zuständen verwendet
Pseudoelemente CSS3 Besonders interessant für Listen und Tabellen
Attribut-Selektoren Filtern HTML-Elemente anhand ihrer Attribute
Kontext-Selektoren Wählen HTML-Elemente anhand ihrer relativen Position innerhalb der Struktur

:empty

Der Selektor :empty filtert leere Tabellenzellen.

td:empty { background: gainsboro; }
float Schwebendes Element
clear Zwingt das Element an den links bzw. rechten Rand
top right bottom left Position eines absolut positionierten Elements
z-index Position in der dritten Dimension an

:checked

Die Farbe von inaktiven Eingabefeldern lässt sich verändern. Checkboxen verändern ihre Position, wenn der Benutzer sie aktiviert – z.B. um aktivierte Checkboxen in einer längeren Serie von Checkboxen hervorzuheben. 

input:disabled { background: darkgray; border: 1px solid gray; }
input:checked { margin-left: 40px;  }
   
Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering U. Häßler 47506 Neukirchen-Vluyn • Impressum und Nutzungsbestimmungen