Markup
Mehrere CSS-Klassen werden in einem einzigen class-Attribut notiert. Sie werden mit Leerzeichen voneinander getrennt.
<div class="notification error"> Eine Fehlermeldung </div> <div class="notification success"> Eine Erfolgsmeldung </div>
CSS
Die Fehler- und Erfolgsmeldungen in diesem Beispiel sollen sich optisch nur durch ihre Farbe unterscheiden. Die gemeinsame Klasse .notification kann also für den Rest der Gestaltung genutzt werden.
.notification {
border: 1px solid #000;
padding: 10px;
font-weight: bold;
margin: 10px 0;
}
.error {
border-color: #c00;
color: #c00;
}
.success {
border-color: #7eb053;
color: #7eb053;
}
Verglichen mit einer einfachen Vergabe spart man genau die CSS-Angaben der gemeinsamen Klasse pro Formatierungstyp. Das Ganze macht sich also noch bemerkbarer, wenn man noch eine Hinweismeldung oder eine Sicherheitsmeldung hinzufügen müsste.
Einschränkung
Nach einigen Anwendungen wird es verlockend, diese multiple CSS-Klassenvergabe für bedingte Formatierungen zu verwenden. Beispiel:
Formatiere das Element mit der Klasse .class1 nur, wenn es auch Klasse .class2 erhält.
.class1.class2 {
font-weight: bold;
text-decoration: underline;
}
Dieser Selektor wird nur von unserem Lieblingsbrowser IE6 völlig ignoriert anders interpretiert. Der die erste(n) Klassen dieses Selektors werden ignoriert und die Gestaltungsangaben werden der zuletzt genannten Klasse zugeteilt. Danke an Volker für diesen Hinweis.
Fazit
Bis auf bedingte Formatierungen ist die multiple Klassenvergbe als CSS-Technik sehr empfehlenswert. Man spart Quelltext und wiederholt nicht unnötig Gestaltungsangaben. Don’t repeat yourself!
Ich denke, ich sollte mein CSS mal überarbeiten :-)
witzig! habe das selbe gerad eben entdeckt und mich sehr darüber gewundert dass ich es noch nicht konnte!
Zu einem Teil mache ich das auch so, allerdings in bestimmten Situationen mache ich das so:
.class xyz element abc {...}
Zum Beispiel für Überschriften bei Inhalten oder Kommentaren. Wenn diese unterschiedlich "gehandelt" werden sollen.
Desweiteren teilweise für den IE auch
.class xyz .class abc .class ... {...}
um Dinge wie "hayLayout" oder so etwas zu fixen. Allerdings weiß ich solche Dinge auch erst seit ein paar Monaten.
Vor allem für Formulare, eine unverzichtbare Möglichkeit diese entsprechend zu formatieren.
>Dieser Selektor wird nur von unserem Lieblingsbrowser IE6 völlig ignoriert
Leider ignoriert IE6 den Selektor nicht völlig, sondern interpretiert – was m.E. noch unangenehmer ist – wendet ihn auf Elemente der letzteren Klasse an. D.h.:
.class1.class2 {} wird interpretiert als
.class2 {}
Tatsächlich? Als ich das mal ausprobiert habe, konnte ich das nicht beobachten. Danke für die Ergänzung!
Christian
14.04.2008
Ich habe jetzt schon oft gehört das viele dieses nützliche Feature von CSS noch nicht kannten, obwohl es doch eigentlich eines der mächtigsten Geschichten ist...
Aber ich glaube das Thema wird wohl so sehr als verständlich erachtet das es schon dazu führt das es kaum einer behandelt und es somit die meisten auch erst recht spät mitbekommen.