Klass-element i CSS

I tidigare lektioner valde vi element på sidan efter taggnamn, till exempel genom att applicera stilar samtidigt på alla stycken. På en sida kan det dock finnas olika typer av stycken som kräver olika stilar. För att lösa detta problem kan olika stycken tilldelas olika CSS-klasser.

För att tilldela en taggnamn till en klass måste du skriva attributet class för den taggen, och i det - ett klassnamn du hittat på, som består av bokstäver, siffror, understreck och bindestreck.

Låt oss titta på ett exempel. Vi skapar stycken med två typer av klasser - eee och 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>

Låt oss nu i CSS välja styckena med olika klasser och ge dem några stilar. Till exempel, låt oss färga styckena med klassen zzz i rött, och styckena med klassen eee - i grönt.

För att göra detta i CSS-filen måste vi välja våra klasser. Urvalet har följande syntax: först kommer en punkt, och sedan det namn på klassen vi hittat på. Det vill säga för att välja klassen eee måste du skriva .eee, och för klassen zzz - skriva .zzz.

Så, låt oss göra som beskrivits. Låt oss lägga till HTML och CSS-stilar för de klasser vi introducerat:

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

Om vi kör vår kod blir resultatet följande:

Följande kod ges:

<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>

Färga elementen med klassen odd i rött och elementen med klassen eve - i grönt.

Följande kod ges:

<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>

Färga alla element med klassen eee i rött.

Förklara varför elementen li i föregående uppgift färgas i rött, trots att klassen som anger färg är tilldelad taggen ul.