CSS Klassenselektoren

In CSS werden KlassenSelektoren durch einen Punktnamen angezeigt:

.center {text-align: center}

In diesem Beispiel sind alle HTML-Elemente mit der Klasse center zentriert.

Im folgenden HTML-Code haben sowohl die h1- als auch die p-Elemente die Klasse center. Dies bedeutet, dass beide den Regeln des Selektors ".center" folgen.

<h1 class="center">
Dieser Überschrift wird eine zentrierte Ausrichtung gegeben.
</h1>
<p class="center">
Dieser Absatz wird ebenfalls zentriert ausgerichtet.
</p>

Hinweis:Der erste Buchstabe des Klassennamens darf keine Zahl sein! Er funktioniert nicht in Mozilla oder Firefox.

Wie bei den IDs kann auch die Klasse als abgeleiteter Selektor verwendet werden:

.fancy td {
	color: #f60;
	background: #666;
	}

In diesem Beispiel werden alle Tabellenzellen innerhalb der größeren Elemente mit dem Klassennamen fancy in Grau mit orangefarbenem Text angezeigt. (Das größere Element namens fancy kann eine Tabelle oder ein div sein.)

Elemente können auch auf Basis ihrer Klasse ausgewählt werden:

td.fancy {
	color: #f60;
	background: #666;
	}

In diesem Beispiel wird die Zelle mit der Klasse fancy eine orange Farbe mit grauem Hintergrund haben.

<td class="fancy">

Sie können die Klasse fancy so oft wie gewünscht einer beliebigen Tabelle zuweisen. Alle Zellen, die mit fancy markiert sind, werden eine orange Farbe mit grauem Hintergrund haben. Zellen, die keine Klasse fancy zugeordnet bekommen, werden von dieser Regel nicht betroffen. Ebenso ist ein Absatz mit der Klasse fancy nicht mit grauem Hintergrund und orange Farbe, natürlich wird auch jeder andere mit fancy markierte Element nicht von dieser Regel betroffen. Dies ist darauf zurückzuführen, dass wir diese Regel so geschrieben haben, dieser Effekt ist auf die mit fancy markierten Tabellenzellen begrenzt (d.h. die Auswahl der fancy-Klasse erfolgt durch den td-Element).

Verwandte Inhalte

Wenn Sie tieferes Wissen über die Klassenselektoren benötigen, lesen Sie bitte das fortgeschrittene Tutorial von CodeW3C.com:CSS Klassenselektoren im Detail.