CSS 2.1: Klassen-Selektor

Bei der Erstellung von Websites kommt es immer wieder vor, dass Elemente mehrfach oder auf jeder Seite erneut auftreten — und sie sollen natürlich immer gleich gestaltet oder mit denselben Attributen ausgestattet sein. Wir können also diese Elemente, da sie immer gleich sind, in einer Klasse mit einem gemeinsamen Namen zusammen fassen.

Dieser Name ist der Klassen-Selektor. Er kann beliebig gewählt werden, darf aber keine Leerzeichen oder Sonderzeichen enthalten und muss innerhalb des Stylesheets mit einem Punkt (.) beginnen. Einem Klassenselektor können beliebige Eigenschaften zugeordnet werden.

Wenn z. B. alle Textabsätze auf allen Seiten einer Website gleich aussehen sollen, definieren wir eine Klasse und bringen den Namen dieser Klasse im Anfangstag jedes Absatzes an. Sollen dann einmal einige Absätze anders aussehen, definieren wir dafür einfach eine neue Klasse.

Syntax:

Es gibt zwei mögliche Formen der Klassendefinitionen:

E.val { Deklarationen } .val { Deklarationen }

In der ersten Form sind die Deklarationen eingeschränkt auf Elemente mit dem Namen E, die ein Attribut class mit dem Wert val aufweisen.

In der zweiten Form gelten die Deklarationen für alle Elemente, die ein Attribut class mit dem Wert val aufweisen. Der Wert muss ohne Leerraum auf den Punkt folgen.

Definiert man mehrere Werte für Klassen hintereinander, muss jedem Wert ein '.' vorangestellt sein.

E.val1.val2 { Deklarationen }

Diese Regel gilt nur für Elemente, denen mindestens die in der Deklaration genannten Klassen, val1 und val2, zugewiesen sind, wie in den folgenden HTML-Beispielen:

<E class="val1 val2"> ...

<E class="val1 val2 val3"> ...

Fehlt eine der genannten Klassen, trifft die Regel auf dieses Element nicht zu.

Bedeutung:

Der Class-Selektor ist eine vereinfachte Form eines Attributselektors. Die folgenden beiden Regeln haben daher dieselbe Wirkung:

E.val { Deklarationen } E[att~=val] { Deklarationen }

Dieser Selektor ermöglicht es, jedem Element fast alle verfügbaren Eigenschaften zuzuordnen. Damit bietet der Klassenselektor dem Webautor ein sehr weitreichendes Maß an Freiheit.

Dies ist der größte Vorteil des Klassenselektors, zugleich aber auch sein größter Nachteil. Er bietet die Möglichkeit, sich mit Hilfe der generischen Elemente DIV und SPAN so etwas wie eine eigene neue Auszeichnungssprache zu entwickeln. Sämtliche HTML-Elemente können durch generische Elemente mit entsprechenden Klassendefinitionen ersetzt bzw. überschrieben werden.

Die CSS-Spezifikation warnt ausdrücklich vor dieser Praxis, denn die Elemente der Auszeichnungssprachen HTML und XHTML weisen bestimmte semantische Eigenschaften auf, die wiedererkennbar und allgemein akzeptiert sind. So wird ein Element P als Absatz dargestellt, LI als Listenelement, QUOTE als Zitat usw. Diese Strukturierung geht verloren, wenn eine Website auf der Basis der semantikfreien Elemente DIV und SPAN mit durch den Autor definierten Klassen erstellt wird.

Wichtig ist auch, dass wir nicht die Namen der Elemente als Klassenbezeichnungen verwenden. Die folgenden Beispieln zeigen, wie man es nicht bzw. wie man es machen sollte:

div.p { Deklarationen } /* Schlechte Absatzauszeichnung */

.seitenfuss { Deklarationen } /* Gute Auszeichnung, nicht nur Absätze */

Anders ist das bei der Verwendung von XML. Da dort die Elemente erst bei der Erstellung des Dokuments definiert werden, können sie auch keine vorgegebene Bedeutung haben.

Das Attribut class eines Elements kann beliebig viele Klassenbezeichnungen enthalten, wenn man dabei zwei Dinge beachtet:

Die einzelnen Namen innerhalb der Anführungszeichen müssen durch Leerzeichen voneinander getrennt sein.
Die Regeln werden entsprechend der Kaskade abgearbeitet. Bei Überschneidungen haben Regeln, die im Stylesheet weiter unten stehen, Vorrang vor denen, die weiter oben stehen. Die Reihenfolge der Namen im HTML- Code spielt keine Rolle.

Ein Beispiel mit fünf Klassenbezeichnungen:

<E class="klasse1 klasse2 klasse3 klasse4 usw"> ...

Ein wichtiger Punkt: zweckgebundene Klassenbezeichnungen

In vielen Stylesheets findet man Klassen, die mit grau, blauelinie oder rotertext bezeichnet sind. Dadurch erhält man zwar beim Lesen des Stylesheets schnell einen Überblick darüber, welche Klasse wie dargestellt wird, aber das sieht man in aller Regel auch so.

Der Nachteil dieser Notation ist: wir wissen nicht, zu welchem Zweck diese Klassen eigentlich geschaffen wurden. Nur wenn aus dem Namen der Klassen hervorgeht, welchen Sinn sie innerhalb des Dokuments haben, sind sie auch universell verwendbar. Es spielt dann keine Rolle mehr, wenn wir unseren besonders wichtigen Text ab sofort in blau statt rot ausgeben wollen. Dagegen wirkt es eher verwirrend, wenn dann die Klasse für diesen Text immer noch rotertext heißt. Und wer sich die Arbeit macht, diese Klasse in blauertext umzubenennen und dies auch in allen Dokumenten zu ändern, wird höchstwahrscheinlich trotz aller Sorgfalt einige Elemente übersehen.

Gute Klassenbezeichnungen sind z. B. textmarker, tabellenkopf oder fussnote. Eine Fußnote bleibt immer eine Fußnote, in welcher Schrift sie auch immer erscheint. Schlechte Klassennamen sind z. B. gross, gelb oder Kleinschrift.

Beispiele:

Die folgenden Regeln:

P.feld { Deklarationen } P.wald { Deklarationen }

treffen auf dieses Element zu:

...

aber auch auf dieses:

...

hier paßt nur die erste der beiden Regeln:

...

Browserunterstützung

Der Klassenselektor wird von allen modernen Browsern unterstützt, folgenden Ausnahmen:

IE/Win 5.x, IE/Win 6: MS IE/Win Versionen 5.x und 6 erkennen Klassen problemlos, verhaspeln sich aber gelegentlich, wenn wie im vorhergehenden Beispiel mehrere Klassen im selben Attribut auftauchen.
IE 7: IE 7 ist in Bezug auf Klassen ganz auf dem Stand von CSS 2.1.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Besonderheiten im Medientyp `handheld`:

Dieser Selektor ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Es sind keine Einschränkungen bei der Umsetzung des Universalselektors durch Mobilgeräte bekannt.