Класи на елементи во 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.

Значи, ајде да го направиме описанoto. Ајде да го додадеме на нашиот 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.

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