multiple Klassen

[Tim Tepaße]

Hallo Christoph,

<div class="servicenavi hl blue">
Das finde ich persönlich ziemlich doof

Wieso das denn?

Trotzdem verstehe ich da was nicht - und nicht nur SELFHTLML, sondern auch alle anderen mir zur Verfügung stehenden Quellen und Validatoren lassen mich da gnadenlos im Stich.

In SELFHTML steht hier zur HTML-Seite und hier zur CSS-Seite etwas dazu. Man muss nur genau lesen. ;)

Oder wenn Du es anhand der Dir doch sicherlich bekannten Standards erklärt haben möchtest:

Definition des class-Attributes in HTML 4:
  “This attribute assigns a class name or set of class names to an element. Any
  number of elements may be assigned the same class name or names. Multiple class
  names must be separated by white space characters.”

Soll heissen: Getrennt durch Whitespace sind sehr wohl verschiedene und mehrere CSS-Klassen im class-Attribut erlaubt. Die Syntax ist auf der CSS-Seite unterschiedlich, weil dort die Leerzeichen für etwas anderes benutzt werden.

Fangen wir klein an: CSS unterscheidet in der Theorie zwischen simplen und komplexeren Selektoren. Als Eselsbrücke: Ein simpler Selektor wählt genau ein Element nach bestimmten Eigenschaften genau des Elementes aus. Ein kompletter Selektor setzt diese Auswahl in Zusammenhang mit anderen Selektoren.

body#startseite > address.autor

Dieser Selektor besteht aus zwei simplen Selektoren ("body#startseite" und "address.autor") die zu einem komplexeren Selektor mit der Kindes-Beziehung (Das address-Element muss ein Kind vom body sein) verknüpft sind. D.h. hier sind zwei simple Selektoren in einer Beziehung.

Simple Selektoren sind aber nicht so simpel, denn sie können ja u.a. ein Element anhand bestimmter Merkmale dieses Elementes auswählen. Der einfachste simple Selektor ist der Universalselektor ("*"), der alles selektiert. Dann kommt der Elementselektor ("h1", "p", ...), der nur Elemente eines bestimmten Namens selektiert. Und diese beiden Selektoren können dann wieder anhand von Merkmalen eingeschränkt werden. Was sind das für Merkmale?

• Die ID eines Elementes ("body#startseite", "#dingsbums", "*#bla")

• Die unterschiedlichen Klassen ("p.notiz", ".stark-betonter-roter-text")

• Sonstige Attribute am Element ("a[href~='http://de.selfhtml.org']" selektiert alle Links auf SELFHTML)

• Pseudoklassen, die sich auf den aktuellen Status eines Elementes oder die Position des Elementes im Dokumenten beziehen ("a:hover" – alle Links, über denen gerade ein Mauszeiger schwebt, "li:first-child" – das erste Listenelement)

• (Theoretisch: Der Namensraum des XML-Elementes mit "xhtml|div", das nur div-Elemente aus dem XML Namensraum von XHTML auswählt, vorausgesetzt das Präfix xhtml wurde vorher definiert.)

Das sind alles Kriterien die sich auf ein bestimmtes Element beziehen; die also die Allgemeinheit eines Universal- oder eines Elementselektors einschränken. Die machen einen Selektor spezifischer, um genau ein Element aus dem Wust der Elemente rauszufischen.

blockquote.bibelzitat
              |      |
  Elementselektor   Spezifisches Kriterium

Der Klassenselektor ist also eigentlich eine Verknüpfung von Universal- oder Elementselektor und einem spezischen, einschränkenden Kriterium, wenn man es ganz genau nehmen will eines Prädikates. Diese Syntax kann man verallgemeinern; wurde es auch.

Definition von simplen Selektoren in CSS 2 (+x):
  “A simple selector is either a type selector or universal selector followed
  immediately by zero or more attribute selectors, ID selectors, or pseudo-
  classes, in any order. The simple selector matches if all of its components
  match.”

Es besteht natürlich ein Interesse, einen Elementselektor mit _mehreren_ Kriterien auszustatten. Wie man das notiert? Einfach alles ohne Leerraum aneinander packensch; die Reihenfolge ist unwichtig. Das hier ist also ein richtiger „simpler“ Selektor ...

xhtml|h1#titel.wichtig.unwichtig[title="Geheime Botschaft!"]:lang(de)

... der da sagt:

Selektiere ein h1-Element,
  allerdings nur, wenn es aus dem XHTML-Namensraum stammt
  ... und nur, wenn es die ID "titel" besitzt
  ... und nur, wenn es beide (!) Klassen "wichtig" und "unwichtig" besitzt
  ... und nur, wenn der Inhalt des title-Attributes genau "Geheime Botschaft!" ist
  ... und nur, wenn es in der deutschen Sprache geschrieben ist.

Und so selektierst Du auch Elemente mit mehrere Klassen auf einmal, Du quetschst alle Klassen aneinander, egal in welcher Reihenfolge. div.hl.servicenavi.blue (und die fünf anderen Kombinationen) passen also genau auf Dein Beispielelement. Trotzdem kann man aber auch immer noch simple Selektoren mit einem Klassenselektor definieren, sie selektieren trotzdem HTML-Elemente mit einer Liste von Klassen, vorausgesetzt das eine Element sei in dieser Liste.

(Um ehrlich zu sein: so vom Kleineren aufs Größere aufgebaut findet man (zumindest ich) diese Erklärung von Selektoren selten bis gar nicht in den gängigen CSS-Einführungen. Diese, insbesondere SELFHTML, wollen natürlich ihre Leser möglichst schnell befähigen, etwas gestalten zu können, anstatt sie mit Theorie zu belasten. Ein aufbauender Dokumentationsstil mit Quickstart-Tips wäre da ein Balanceakt. Insofern ist es halbwegs verzeihbar, dieses Feature von CSS nicht aus dem Effeff zu kennen. Andererseits frage ich mich mal wieder, wie Du es geschafft hast, die simple Notation mehrerer Klassen in HTML über Jahre zu übersehen, vor allem, weil das im Wilden Web fleissig benutzt und hier öfters mal nachgefragt wird. Eigentlich schreibe ich das nur, damit man in Zukunft endlich mal was zum Verlinken hat.)

Tim