multiple Klassen

[Christoph Schnauß]

hallo Forum,

entschuldigt, daß ich auf den letzten von mir angestoßenen Thread bzw. die Antworten nicht weiter eingegangen bin - gelesen habe ich alles.

Jetzt was anderes, was nicht so sehr "offtopic" ist: ich placke mich derzeit mit der Revision der CSS/HTML-Ausgaben eines ziemlich sehr großen, weltweit agierenden sowie börsennotierten "Kunden" herum. Da gibt es ein CMS, das letztlich auf JAVA basiert - aber das ist wurscht. Nur tut dieses CMS viele Dinge, die ich nicht gutheißen kann. Am Ende kommt beim Webseitenbesucher unter anderem im Quelltext sowas an:
  <div class="servicenavi hl blue">
Das finde ich persönlich ziemlich doof, aber es scheint sämlichen mir bisher bekannten Browsern völlig egal zu sein, sie machen irgendwas, und eigentlich machen sie sogar alle miteinander das, was herauskommen soll. Damit könnte ich mich ja zufriedengeben, wenn ich bloß das Geld meines Auftraggebers haben wollte. Ähm ... das kriege ich laut Vertrag auch.

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. Es geht mir wirklich nur darum, zu verstehen, weshalb
  <div class="servicenavi hl blue">
anscheinend gültig ist und weshalb die Browser _sowas_ akzeptieren.

Bisher war ich immer davon ausgegangen, daß einzig und allein eine Konstruktion wie
  <div class="servicenavi">
gültig wäre und ich schweren Herzens für "h1" und "blue" eben weitere Subcontainer erfinden müßte.

Kanns mir eventuell jemand erklären?

Grüße aus Berlin

Christoph S.

[semaphor]

Moin auch!

Hab mal eben auch ein bißchen rumgegoogelt und bin doch auf was gestoßen:

bei :  http://www.w3.org/TR/css3-selectors/

findet man folgende Notiz:

Note: If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class. As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification.

Nicht normativ, aber vom w3c vorgegebenes Verhalten - klingt echt merkwürdig,
aber wenn's denn funktioniert...

Wichtiger ist eh, wie die Browser etwas umsetzen und nicht, wie es sein sollte.

[Marc]

Hallo zusammen,

Wichtiger ist eh, wie die Browser etwas umsetzen und nicht, wie es sein sollte.

Wenn etwas in allen Browsern richtig aussieht, obwohl es nicht standard-konform ist, kann man mit der nächsten Browsergeneration Probleme bekommen. Wenn es keine standardkonforme Lösung gibt, sollte man sich etwas anderes einfallen lassen und u. U. auch mal auf eine exotische Lösung/Gestaltung verzichten. Wenn der Kunde aber auf etwas besteht, sollte man möglichst schriftlich festhalten, dass für zukünftige Browser u. U. das gewünschte Verhalten nicht gewährleistet werden kann. Dann trägt der "Ich-will-das-aber-so-und-nicht-anders"-Kunde das Risiko.

An seiner eigenen Website kann man natürlich "pfuschen" so viel man will - empfehlen kann man das aber keinesfalls.

Viele Grüße,
Marc.

[Struppi]

Wichtiger ist eh, wie die Browser etwas umsetzen und nicht, wie es sein sollte.

Wenn etwas in allen Browsern richtig aussieht, obwohl es nicht standard-konform ist, kann man mit der nächsten Browsergeneration Probleme bekommen. Wenn es keine standardkonforme Lösung gibt, sollte man sich etwas anderes einfallen lassen und u. U. auch mal auf eine exotische Lösung/Gestaltung verzichten.

Mehrere Klassen in dem class Attribut sind nichts exotisches. Aber ansonsten gebe ich dir recht.

Struppi.

[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

[Cheatah]

Hi,

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

ich auch. Wie kann man nur auf die Idee kommen, eine Klasse "blue" zu nennen? Oder geht es da beim Inhalt um Traurigkeit?

aber es scheint sämlichen mir bisher bekannten Browsern völlig egal zu sein, sie machen irgendwas, und eigentlich machen sie sogar alle miteinander das, was herauskommen soll.

Tja, ist schon erstaunlich, dass sich ausnahmsweise mal alle halbwegs aktuellen Browser richtig verhalten. Außer der IE natürlich, der bis einschließlich Version 6 noch nicht in der Lage ist, mehrere dieser Klassen zu selektieren.

Cheatah

[Marc]

Hallo zusammen,

Hi,

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

ich auch. Wie kann man nur auf die Idee kommen, eine Klasse "blue" zu nennen? Oder geht es da beim Inhalt um Traurigkeit?

Oder eine Klasse für ein div h1...

Viele Grüße,
Marc.

[Cheatah]

Hi,

<div class="servicenavi hl blue">
Oder eine Klasse für ein div h1...

das'n kleines "L". Aber falls das dann für "highlight" stehen sollte, stimme ich Dir natürlich zu ...

Cheatah

[wahsaga]

hi,

<div class="servicenavi hl blue">
Oder eine Klasse für ein div h1...

das'n kleines "L". Aber falls das dann für "highlight" stehen sollte, stimme ich Dir natürlich zu ...

Ich befürchte eher, es steht für headline.

gruß,
wahsaga