Класе елемената у CSS-у

У претходним лекцијама одабирали смо елементе странице по имену тага, задајући стилове, на пример, истовремено свим пасусима. На страници, међутим, могу постојати пасуси различитих типова, на које треба примењивати различите стилове. За решавање таквог проблема можемо различите пасусе сврстати у различите CSS класе.

Да бисмо сврстали таг у неку класу, потребно је том тагу написати атрибут class, а у њему – ваше смишљено име класе, које се састоји од слова, цифара, симбола доње црте и цртице.

Погледајмо на примеру. Направимо пасусе са два типа класа – eee и 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>

Да бисмо сада приступили у CSS-у пасусима са различитим класама и задали им неке стилове. На пример, обојимо пасусе са класом zzz у црвену боју, а пасусе са класом eee – у зелену.

За то је у CSS датотеци потребно приступити нашим класама. Приступ има следећу синтаксу: прво иде симбол тачка, а затим наше смишљено име класе. То јест за приступ класи eee потребно је написати .eee, а за класу zzz – написати .zzz.

Дакле, урадимо описано. Додајмо нашем HTML-у још и CSS стилове за уведене класе:

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

Ако покренемо наш код, у резултату ћемо добити следеће:

Дат је следећи код:

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

Обојите у црвену боју елементе са класом odd и у зелену боју – елементе са класом eve.

Дат је следећи код:

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

Обојите у црвену боју све елементе са класом eee.

Објасните зашто се у претходном задатку у црвену боју боје тагови li, иако је класа, која задаје боју, додељена тагу ul.