Elementklassen in CSS

In eerdere lessen selecteerden we elementen op de pagina op basis van de tagnaam, en pasten stijlen toe op bijvoorbeeld alle alinea's tegelijk. Op een pagina kunnen echter alinea's van verschillende typen voorkomen, waaraan verschillende stijlen moeten worden toegepast. Om dit probleem op te lossen, kunnen verschillende alinea's worden ondergebracht in verschillende CSS klassen.

Om een tag aan een klasse toe te wijzen, moet je aan die tag het attribuut class toevoegen, en daarin - een door jou verzonnen klassenaam, bestaat uit letters, cijfers, underscores en streepjes.

Laten we naar een voorbeeld kijken. We maken alinea's met twee soorten klassen - eee en zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Laten we nu in CSS de alinea's met de verschillende klassen aanspreken en ze enkele stijlen geven. Laten we bijvoorbeeld de alinea's met klasse zzz in rood kleuren, en de alinea's met klasse eee - in groen.

Om dit te doen, moeten we in het CSS-bestand naar onze klassen verwijzen. De verwijzing heeft de volgende syntaxis: eerst komt een punt, en dan de door ons verzonnen klassenaam. Dus om te verwijzen naar klasse eee moeten we .eee schrijven, en voor klasse zzz - .zzz.

Laten we het beschrevene doen. Voegen we aan onze HTML ook CSS-stijlen toe voor de door ons ingevoerde klassen:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Als we onze code uitvoeren, krijgen we het volgende resultaat:

Gegeven de volgende code:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Kleur de elementen met klasse odd in rood en de elementen met klasse eve - in groen.

Gegeven de volgende code:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Kleur alle elementen met klasse eee in rood.

Leg uit waarom in de vorige opgave de li-tags rood worden gekleurd, terwijl de klasse die de kleur bepaalt, is toegewezen aan de ul-tag.