Třídy prvků v CSS

V předchozích lekcích jsme vybírali prvky stránky podle názvu tagu, nastavovali jsme styly například všem odstavcům najednou. Na stránce ale mohou být odstavce různých typů, na které je potřeba aplikovat různé styly. K vyřešení takového problému můžeme různé odstavce přiřadit k různým CSS třídám.

Abyste přiřadili tag nějaké třídě, je potřeba tomuto tagu napsat atribut class, a do něj - vymyšlený název třídy, složený z písmen, číslic, znaků podtržítka a pomlčky.

Podívejme se na příklad. Vytvořme odstavce se dvěma typy tříd - 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>

Nyní přistupme v CSS k odstavcům s různými třídami a nastavme jim nějaké styly. Například obarvíme odstavce s třídou zzz na červenou a odstavce s třídou eee na zelenou.

K tomu je potřeba v CSS souboru přistoupit k našim třídám. Přístup má následující syntaxi: nejprve přijde znak tečka a poté námi vymyšlený název třídy. To znamená, že pro přístup ke třídě eee je potřeba napsat .eee, a pro třídu zzz - napsat .zzz.

Takže, udělejme, co je popsáno. Přidejme k našemu HTML také CSS styly pro zavedené třídy:

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

Pokud spustíme náš kód, výsledkem bude následující:

Je dán následující 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>

Obarvěte prvky s třídou odd na červenou a prvky s třídou eve na zelenou.

Je dán následující 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>

Obarvěte všechny prvky s třídou eee na červenou.

Vysvětlete, proč se v předchozí úloze na červenou obarví tagy li, ačkoli třída, nastavující barvu, je přiřazena tagu ul.