CSS3 Selectors

CSS3 wurde, wie schon zuvor erwähnt, in Module aufgeteilt, die bisherige bzw. in den früheren Versionen vorgestellte und neue Features beschreiben. Die Basis dafür ist CSS Layer 2 Revision 1. Dazu kommen sogenannte Profile, die für bestimmte Plattformen ausgewählte Eigenschaften zusammenfassen bzw. auflisten – z.B. „CSS TV Profile 1.0“ für Fernsehgeräte.

Das vielleicht als am stabilsten angesehene Modul ist „Selectors Level 3“. Das offizielle W3C-Dokument ist hier zu finden: http://www.w3.org/TR/css3-selectors/. In seiner letzten offiziellen Veröffentlichung am 15. Dezember 2009 ist es als Proposed Recommendation gekennzeichnet. Es beinhaltet alle in CSS1 und CSS2 bzw. CSS 2.1 vorgestellten Auswähler – auch Selektoren genannt – und führt neue ein.

Durch Selektoren werden Elemente, Attribute oder Bereiche eines Dokuments ausgewählt, um sie dann zu verändern bzw. zu formatieren.

Attribut-Selektoren

Die Selektoren für Attribute erlauben das Auswählen von Elementen anhand ihrer Attribute und Attributwerte. Durch h1[title] werden alle h1 mit einem title angesprochen. Bei a[href="www.example.com"] wird jedes a-Element mit genau „www.example.com“ als href-Wert, jedoch nicht z.B. mit „wwwexample.com/home“ ausgewählt. Durch a[rel ~ ="foto"] würde man ein a-Element mit foto bild andere als rel-Wert auswählen – die Zeichen „foto“ müssen im Wert enthalten sein.

Mit den neuen Selektoren kann man nach Teilen eines Attributwertes suchen:

• [att^="val"] sucht nach Elementen mit att als Attribut, dessen Wert mit val beginnt.
• [att$="val"] sucht nach Elementen mit att als Attribut, dessen Wert mit val endet.
• [att*="val"] sucht nach Elementen mit att als Attribut, das die Zeichenkette val im Wert enthält.

Folgende Beispiele verdeutlichen das:

object[type^="image/"]

Der Selektor repräsentiert alle object-Elemente, die auf Bilder verweisen.

a[href$=".html"]

Der Selektor repräsentiert alle a-Elemente, die auf HTML-Dateien verweisen.

p[title*="hello"]

Der Selektor repräsentiert alle Paragraphen, bei denen das Wort „hello“ im title vorkommt.

Struktur-Pseudo-Klassen

Das ist ein neuer Typ Selektoren – eine Untergruppe von den Pseudo-Selektoren. Er repräsentiert Elemente, die Teil eines Strukturbaumes im Dokument sind, aber nicht durch normale Selektoren oder durch Kombinationen von Selektoren ausgewählt werden können.

Struktur-Pseudo-Klassen sind:

• :root
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :empty

:root repräsentiert das erste bzw. das Wurzelelement. In einem HTML-Dokument ist das z.B. html.

Mit :nth-child() kann die genaue Stelle eines Elements im Strukturbaum angesprochen werden. Es besteht auch die Möglichkeit, mehrere Elemente zu markieren. Vordefinierte Werte sind odd für ungerade und even für gerade – Anders ausgedrückt 2n+1 für odd und 2n für even. Man kann jedes Kind-Element auswählen, wenn man die Reihenfolge und seinen Platz darin kennt:

tr:nth-child(2n+1) /* alle ungeraden Reihen einer Tabelle */
tr:nth-child(odd)  /* wie oben */
tr:nth-child(2n+0) /* alle geraden Reihen einer Tabelle */
tr:nth-child(even) /* wie oben */


Die Zahl (ohne n) repräsentiert die Stelle des ersten Elements, das auszuwählen ist. Der Wert vor n, wobei n = 1, wird kontinuierlich dazuaddiert:

p:nth-child(4n+1) { color: navy; }   /* Paragraph 1, 5, 9, 13… */
p:nth-child(4n+2) { color: green; }  /* Paragraph 2, 6, 10, 14… */
p:nth-child(4n+3) { color: maroon; } /* Paragraph 3, 7, 11, 15… */


Man kann auch negative Zahlen verwenden:

:nth-child(10n-1)  /* Element 9, 19, 29…, da -1 + 10 */
:nth-child(10n+9)  /* wie Oben */


Mit :nth-child(5) kann man z.B. nur ein Element auswählen – hier das fünfte.

n kann auch ein negativer Wert sein:

tr:nth-child(-n+6)  /* die ersten 6 Reihen einer Tabelle */

Man muss beachten, dass keine negativen Werte bei der Berechnung entstehen, wie z.B. bei (-10n+5). Da es kein Element „-5“ geben kann, wird nur das fünfte Element ausgewählt.

Folgende Auswähler basieren auf :nth-child() und haben auch odd und even als vordefinierte Werte: :nth-last-child(), :nth-of-type(), und :nth-last-of-type().

:nth-last-child() funktioniert genau wie :nth-child(). Es wird nur die Reihenfolge beim Zählen vertauscht – vom letzten Element beginnend:

tr:nth-last-child(-n+6)  /* die letzten 6 Reihen einer Tabelle */

:nth-of-type() bezieht sich auf Elementtypen, ohne sich auf ein bestimmtes Elternelement beschränken zu müssen:

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }


Hier wird die Position jedes img-Tags durch float bestimmt.

:nth-last-of-type() funktioniert wie :nth-of-type() – das Zählen beginnt aber beim letzten Element:

h2:nth-of-type(n+2):nth-last-of-type(n+2)

Hier werden alle h2-Elemente markiert, außer das erste und das letzte.

:first-child und :last-child sind identisch mit :nth-child(1) und :nth-last-child(1).

:first-of-type und :last-of-type sind identisch mit :nth-of-type(1) und :nth-last-of-type(1).

:only-child wählt das einzige Kind-Element eines Elternelements aus. Es ist identisch mit :first-child:last-child oder :nth-child(1):nth-last-child(1).

:only-of-type wählt das einzige Element eines bestimmten Typs aus. Es ist identisch mit :first-of-type:last-of-type oder :nth-of-type(1):nth-last-of-type(1).

Mit :empty werden Elemente ohne Kind-Elemente und ohne Inhalt ausgewählt. p:empty funktioniert z.B. bei: <p></p>. Es ist jedoch ungültig bei: <p>text</p> oder <p>text und <b>mehr</b> text</p>.

Andere Pseudo-Klassen

Neu sind:

• :not()
• :target
• :enabled
• :disabled
• :checked

:not() repräsentiert eine Verneinung und funktioniert nur bei einfachen Selektoren. Das würde Kombinationen, wie :not(h1, p) ausschließen. Zugelassen sind Typ-Selektoren (h1), universale Selektoren (*),  Attribut-Selektoren ([title]), Klassen (.box), IDs (#box_1) und Pseudo-Klassen (:first-of-type).

Mit button:not([DISABLED]) wählt man alle Elemente des Typs button aus, die nicht disabled sind. Und *:not(h1) würde alle Elemente auswählen, die keine Überschrift erster Ebene sind.

h2:not(:first-of-type):not(:last-of-type)

ist z.B. identisch mit:

h2:nth-of-type(n+2):nth-last-of-type(n+2)

:target wurde eingeführt, um Verweise innerhalb eines Dokuments formatieren und so besser identifizieren zu können. Es repräsentiert das Ziel-Element eines Anker-Links:

*:target { color: red }
*:target::before { content: url(target.png) }


Hier werden alle Ziel-Elemente angesprochen und formatiert. Die Formatierung tritt ein, nachdem der Link bzw. die Sprungmarke zum Element angeklickt wurde. Es muss also zuerst eine Interaktion stattfinden, wie z.B. bei :hover.

Mit :enabled und :disabled werden Elemente, die sich im Zustand enabled bzw. disabled befinden, z.B. Formularfelder, ausgewählt.

Mit :checked lassen sich markierte Checkboxen und Radio-Buttons ansprechen.

Allgemeiner Geschwister-Kombinator

Zusätzlich wird ein neuer Kombinator eingeführt – der Allgemeine Geschwister-Kombinator. Die Schreibweise ist E ~ F. Es wird ein F-Element, das nach einem E-Element kommt, ausgewählt. Dabei müssen diese Elemente (E und F) demselben Elternelement angehören. Zwischenelemente sind erlaubt – wie bei E F.

<p>Der <i>neue Kombinator</i> in <b>CSS3</b> wird mit einem <i>Tilde-Zeichen</i> geschrieben. Es gibt jetzt insgesamt <i>vier Kombinatoren</i> in <b>CSS</b></p>

Mit b~i würde man die zwei i-Elemente, die nach b kommen, auswählen. Und mit i~b jedes b-Element, jeweils nach i.

E+F und E>F erlauben keine Zwischenelemente – der Pfad muss genau stimmen. Somit ist der neue Kombinator mehr mit E F verwandt.

Eine neue Schreibweise gibt es bei den Pseudo-Elementen. Sie werden jetzt mit zwei Doppelpunkten davor geschrieben – von :first-line, :first-letter, :before und :after wird ::first-line, ::first-letter, ::before und ::after. So sind sie besser von den Pseudo-Klassen zu unterscheiden. Pseudo-Elemente dürfen nur einmal pro Auswähler verwendet werden. p::after::before wäre also ungültig.