Klassenselektor

Ein Typselektor gestaltet alle Elemente eines Typs. Oft willst du aber nur einige davon gestalten. Dafür gibt es Klassen.

Eine Klasse ist eine Bezeichnung, die du Elementen mit dem Attribut class gibst. Auf unserer Seite haben die beiden div-Elemente mit der Beschreibung und der Physiologie der Katze die Klasse gruppe:

<div class="gruppe">
	<h2>Beschreibung</h2>
	...
</div>

Den Namen einer Klasse denkst du dir selbst aus. Er sollte sagen, was die Elemente sind, und er darf keine Leerzeichen enthalten, verwende also Bindestriche: titel-hintergrund. Anders als eine id kann eine Klasse von beliebig vielen Elementen geteilt werden, und ein Element kann mehrere Klassen haben, durch Leerzeichen getrennt: class="gruppe hervorgehoben".

Um die Elemente mit einer Klasse auszuwählen, schreibst du einen Punkt gefolgt vom Namen der Klasse:

.gruppe {
	color: purple;
}

Vergiss den Punkt nicht. Ohne ihn wäre gruppe ein Typselektor, der nach <gruppe>-Elementen sucht, und die gibt es auf der Seite nicht.