Elementtien luokat CSS:ssä

Edellisissä oppitunneissa valitsimme sivun elementtejä tagien nimen perusteella, asettaen tyylejä esimerkiksi kaikille kappaleille kerralla. Sivulla voi kuitenkin olla erityyppisiä kappaleita, joihin on sovellettava eri tyylejä. Tämän ongelman ratkaisemiseksi voidaan eri kappaleet luokitella eri CSS-luokkiin.

Luokitellakseen tagi johonkin luokkaan, on sille kirjoitettava attribuutti class, ja siihen - keksimäsi luokan nimi, joka koostuu kirjaimista, numeroista, alaviivoista ja viivoista.

Katsotaanpa esimerkkiä. Tehdään kappaleet kahdella eri luokalla - eee ja 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>

Viitataan nyt CSS:ssä eri luokkiin kuuluviin kappaleisiin ja annetaan niille joitain tyylejä. Esimerkiksi väritetään luokan zzz kappaleet punaisella, ja luokan eee kappaleet vihreällä.

Tätä varten CSS-tiedostossa on viitattu luokkiimme. Viittauksessa on seuraava syntaksi: ensin tulee piste-merkki, sitten keksimämme luokan nimi. Eli viitataksesi luokkaan eee on kirjoitettava .eee, ja luokalle zzz - kirjoitettava .zzz.

Tehdään siis kuvattu. Lisätään HTML:äämme myös CSS-tyylit luoduille luokillemme:

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

Jos käynnistämme koodimme, saamme seuraavan tuloksen:

Annettu seuraava koodi:

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

Väritä luokan odd elementit punaiseksi ja luokan eve elementit - vihreäksi.

Annettu seuraava koodi:

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

Väritä kaikki luokan eee elementit punaiseksi.

Selitä, miksi edellisessä tehtävässä li-tagejä väritetään punaiseksi, vaikka väriä asettava luokka on annettu ul -tagille.