CSS Class Selectors

In CSS wordt de klasse selector weergegeven met een puntje:

.center {text-align: center}

In het bovenstaande voorbeeld zijn alle HTML-elementen met de klasse center centreren.

In de onderstaande HTML-code hebben zowel de h1 als de p-elementen de klasse center. Dit betekent dat beide elementen de regels van de selector ".center" zullen volgen.

<h1 class="center">
Deze kop zal centreren worden.
</h1>
<p class="center">
Deze alinea zal ook centreren worden.
</p>

Opmerking:De eerste letter van de klasse naam mag geen cijfer zijn! Het werkt niet in Mozilla of Firefox.

Net als met id kan class ook worden gebruikt als een afgeleide selectie:

.fancy td {
	kleur: #f60;
	achtergrond: #666;
	}

In dit voorbeeld worden alle tabelcellen binnen de grotere elementen met de klasse naam fancy weergegeven met een grijze achtergrond en oranje tekst. (Het grotere element met de naam fancy kan een tabel of een div zijn.)

Elementen kunnen ook op basis van hun klasse worden geselecteerd:

td.fancy {
	kleur: #f60;
	achtergrond: #666;
	}

In het bovenstaande voorbeeld zal de tabelcel met de naam fancy een oranje achtergrond met een grijze kleur hebben.

<td class="fancy">

Je kunt de klasse fancy meerdere keren toekennen aan elk tabel-element. Alle cellen die met fancy zijn gemarkeerd, zullen een oranje achtergrond met een grijze kleur hebben. Cellen die geen klasse fancy hebben toegewezen, worden niet beïnvloed door deze regel. Het is ook het geval dat paragrafen met de klasse fancy geen oranje achtergrond met een grijze kleur zullen hebben, evenals andere elementen die worden gemarkeerd als fancy, zullen niet worden beïnvloed door deze regel. Dit komt doordat we deze regel op deze manier hebben geschreven, en het effect is beperkt tot de tabelcellen die zijn gemarkeerd als fancy (dus gebruik de td-element om de fancy-klasse te selecteren).

Gerelateerde Inhoud

Als je dieper wilt leren over het gebruik van class selectors, lees dan de geavanceerde cursus van CodeW3C.com:CSS Class Selectors Uitleg.