Elementklasser i CSS

I de foregående lektioner valgte vi elementer på siden efter tag-navn, hvor vi anvendte stilarter på f.eks. alle afsnit på samme tid. På en side kan der dog være afsnit af forskellige typer, som kræver forskellige stilarter. For at løse dette problem kan man tildele forskellige afsnit forskellige CSS-klasser.

For at tildele et tag en klasse, skal du skrive attributten class på tagget, og i den - dit selvvalgte klassens navn, bestående af bogstaver, tal, understregninger og bindestreger.

Lad os se på et eksempel. Lad os lave afsnit med to typer klasser - eee og 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>

Lad os nu i CSS tilgå afsnit med de forskellige klasser og give dem nogle stilarter. For eksempel, lad os farve afsnit med klassen zzz i rød farve, og afsnit med klassen eee - i grøn farve.

For at gøre dette i CSS-filen, skal du tilgå vores klasser. Tilgangen har følgende syntaks: først kommer et punktum, og derefter vores selvvalgte klassens navn. Det vil sige, for at tilgå klassen eee skal du skrive .eee, og for klassen zzz - skrive .zzz.

Så lad os gøre som beskrevet. Lad os tilføje til vores HTML også CSS-stilarter for de indførte klasser:

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

Hvis du kører vores kode, bliver resultatet følgende:

Følgende kode er givet:

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

Farve elementer med klassen odd i rød farve og elementer med klassen eve - i grøn farve.

Følgende kode er givet:

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

Farve alle elementer med klassen eee i rød farve.

Forklar, hvorfor elementerne li i den foregående opgave farves røde, selvom klassen der angiver farven, er tildelt tagget ul.