Klassen-Selektor

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Um einen Stil für mehrere HTML-Elemente auf einmal zu definieren, benutzt man einen Klassen-Selektor. Jedes HTML-Element, auf das der Stil zutreffen soll, bekommt ein class-Attribut, das auf die Stilregel verweist.

Um in einem Stylesheet eine Klasse anzulegen, gibt man ihr einen beliebigen Namen und schreibt einen Punkt davor. Zwischen Punkt und Klassennamen darf kein Leerzeichen stehen.

Die folgende Stilregel gilt für die Klasse mit dem Namen special.

.special {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Die Klasse special kann jedem HTML-Element hinzugefügt werden, das mit diesen Eigenschaften dargestellt werden soll:

<h1 class="special">Eine spezielle Überschrift</h>
<p class="special">Ein Absatz mit Inhalt.</p>

Wenn eine Klasse nur für bestimmte Elementtypen gelten soll, wird dieser ebenfalls ohne Leerzeichen in den Selektor vor den Punkt geschrieben. Im folgenden Beispiel wird die Klasse special nur für das Absatzelement erzeugt.

p.special {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Legt man eine Klasse nur für einen speziellen Elementtyp an (wie p.special) und weist ihr dann ein vom Selektor abweichendes anderes Element zu, kommt die Stilregel nicht zum Einsatz.

Ein Element kann auch mehreren Klassen zugewiesen werden. Dafür werden die Klassennamen im class-Attribut aufgelistet und durch ein Leerzeichen voneinander getrennt:

<p class="special aufregend">Absatz! Mit! Inhalt!</p>

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg