CSS: Zuweisung mehrerer Klassen - Vorrang bei Konflikten

Lösung

Wir definieren in CSS eine Klasse für Basiseigenschaften und jeweils eine Klasse für die spezielle. Jeder div bekommt eine Basisklasse und seine spezielle Klasse im class-Attribut.

HTML, Divs:

<div class="foo basis"></div>
<div class="bar basis"></div>
<div class="baz basis"></div>

CSS:

.basis{
  background-color : #BBBBBB;
  color : black;
}
.foo{
  color : red;
  font-size : 200%;
}
.bar{
  color : grey;
}
.baz{
  color : yellow;
}

Alle Divs würden die gleiche Hintergrundfarbe haben, aber jeweils eigene Textfarbe. Text im Div mit foo-Klasse wäre zwei mal größer dazu. Sieht ja ziemlich trivial und intuitiv aus.

Das nicht so triviale und intuitive - Vorrang der Werte bei Konflikten

Was man auf den ersten Blick erkennen kann, ist dass bei der Verwendung von mehreren Klassen in einem HTML-Element eine Vereinigungsmenge der Eigenschaften aus den verwendeten Klassen gebildet wird.
Etwas nicht intuitiv sieht es aus, wenn es Konflikte zwischen den Klassen gibt. Das heißt, wenn ein Attribute mehrmals in verschiedenen Klassen mit unterschiedlichen Werten auftaucht. Im Beispiel oben wäre das Attribut "color" so ein Fall.

Welcher Wert soll nun bevorzugt werden, wenn es Konflikte gibt? Nicht intuituv aber sehr einfach: das was als letztes von den verwendeten Klassen in dem Stylesheet steht. In anderen Worten - würde in unserem Beispiel basis-Block ganz unten stehen, wären alle Div-Texte schwarz.

Da war noch eine Ausnahme

Falls man wünscht, dass Eigenschaften gewisser Kombinationen aus Klassen unabhängig von ihrer Position im Stylesheet bevorzugt werden, kann man folgende Notationsweise im Stylesheet verwenden:

.basis.bar{
  color : green;
}

So würde im Falle der Fälle für eine Klassenkombination aus Basis und Bar der Text grün erscheinen. Unabhängig von der Position im Stylesheet.
Allerdings kann damit z.B. IE8 nicht umgehen - das habe ich zumindest gesagt bekommen. Leider kann ich es nicht selber testen, da kein Windows bei Hand.

Ach ja, es ist (zumindest in FF3.5) egal ob es ".basis.foo" oder ".foo.basis" ist und egal welche Reihenfolge im class-Attribut des divs ist. Tauchen jedoch beide Kombinationen im Stylesheet auf, trifft die erste Regel zu: die letzte gewinnt.