Triedy prvkov v CSS

V predchádzajúcich lekciách sme vyberali prvky stránky podľa názvu tagu, nastavovali sme štýly napríklad všetkým odsekom naraz. Na stránke však môžu byť rôzne typy odsekov, ku ktorým je potrebné aplikovať rôzne štýly. Na vyriešenie tohto problému môžeme rôzne odseky zaradiť do rôznych CSS tried.

Ak chceme tag priradiť k nejakej triede, musíme tomuto tagu napísať atribút class, a v ňom - vami vymyslený názov triedy, zložený z písmen, číslic, znakov podčiarknutia a pomlčky.

Pozrime sa na príklad. Vytvorme odseky s dvoma typmi tried - eee a 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>

Teraz pristúpme v CSS k odsekom s rôznymi triedami a priraďme im nejaké štýly. Napríklad ofarbíme odseky s triedou zzz na červeno a odseky s triedou eee na zeleno.

Na to potrebujeme v CSS súbore pristúpiť k našim triedam. Prístup má nasledujúcu syntax: najprv ide bodka a potom nami vymyslený názov triedy. To znamená, že pre prístup k triede eee musíme napísať .eee, a pre triedu zzz - napísať .zzz.

Urobme teda popísané. Pridajme k nášmu HTML aj CSS štýly pre naše zavedené triedy:

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

Ak spustíme náš kód, výsledkom bude nasledovné:

Daný je nasledujúci kód:

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

Ofarbite na červeno prvky s triedou odd a na zeleno - prvky s triedou eve.

Daný je nasledujúci kód:

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

Ofarbite na červeno všetky prvky s triedou eee.

Vysvetlite, prečo sa v predchádzajúcej úlohe farbia na červeno tagy li, hoci trieda, nastavujúca farbu, je priradená tagu ul.