Elementklasser i CSS

I tidligere leksjoner valgte vi elementer på siden etter taggnavn, og stilte for eksempel alle avsnittene på en gang. På en side kan det imidlertid være avsnitt av forskjellige typer som trenger forskjellige stiler. For å løse dette problemet kan vi plassere forskjellige avsnitt i forskjellige CSS-klasser.

For å tildele en tag en klasse, må du skrive attributtet class på taggen, og i det - et selvvalgt klassnavn som består av bokstaver, tall, understrekingssymboler og bindestreker.

La oss se på et eksempel. La oss lage avsnitt med to typer klasser - eee og zzz:

<p class="eee">
	avsnitt med klasse eee
</p>
<p class="eee">
	avsnitt med klasse eee
</p>
<p class="zzz">
	avsnitt med klasse zzz
</p>
<p class="zzz">
	avsnitt med klasse zzz
</p>

La oss nå henvise i CSS til avsnittene med forskjellige klasser og gi dem noen stiler. For eksempel, la oss farge avsnittene med klassen zzz i rødt, og avsnittene med klassen eee - i grønt.

For å gjøre dette i CSS-filen må vi henvise til våre klasser. Henviselsen har følgende syntaks: først kommer et punktum, og deretter vårt selvvalgte klassnavn. Det vil si at for å henvise til klassen eee må vi skrive .eee, og for klassen zzz - skrive .zzz.

Så la oss gjøre som beskrevet. La oss legge til HTML-en vår også CSS-stiler for de innførte klassene våre:

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

Hvis vi kjører koden vår, blir resultatet følgende:

Følgende kode er gitt:

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

Fargelegg elementene med klassen odd i rødt og elementene med klassen eve i grønt.

Følgende kode er gitt:

<h2 class="eee">Tittel</h2>
<p class="eee">
	avsnitt
</p>
<p class="eee">
	avsnitt
</p>
<p>
	avsnitt uten klasse
</p>

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

Fargelegg alle elementene med klassen eee i rødt.

Forklar hvorfor elementene li i forrige oppgave farges rødt, selv om klassen som angir fargen er tildelt taggen ul.