Атрибут class

Атрибут class задаје једну или више класа за елемент (под елементом се подразумева таг).

То се ради да би се затим преко CSS-а могло приступити групи елемената којима је задата иста класа, и применити за њу одређена својства (на пример, променити боју текста, величину фонта и тако даље).

Постоји такође атрибут id, који слично атрибуту class омогућава избор елемената на HTML страници.

Разлика између атрибута class и атрибута id је у томе што class бира групу елемената (чак и ако је дат једном елементу - касније се може доделити и другом), а id бира јединствени елемент (не би требало да буде више елемената са тим id на страници сајта, иначе ће доћи до конфликта).

Како разумети, шта дати елементу - класу или id? Класа се даје оним елементима који се понављају на страницама сајта (да се не би више пута писао исти CSS код). Чак и ако је тренутно тај елемент један, али осетите да се слични елементи могу појавити у будућности - дајте том елементу класу. Ако сте пак сигурни да је такав елемент јединствен - онда му дајте id. Иако у данашње време постоји тенденција да свим елементима се дају класе, а id оставе за JavaScript, она није општеприхваћена.

Елементу се могу задати више класа, у том случају их треба навести раздвојене размаком.

Називи класа треба да буду набрани енглеским словима, цифрама, без размака (размак раздваја класе једну од друге, уместо њега се може користити доња црта или цртица). Класе не би требало да почињу цифром (у HTML5 већ може, али неће радити у старим прегледачима).

Имена класама треба давати на енглеском језику (а не на српском, једноставно енглеским словима!). Имена треба да буду смислена, да одражавају суштину класе.

Пример

Задајмо свим пасусима са класом test црвену боју текста:

<p class="test">Пасу са класом test.</p>
<p>Контролни пасус без класе.</p>

.test {
	color: red;
}

Пример . Више класа за елемент

А овде дајмо првом пасусу неколико класа - test1 и test2 (запишимо их размаком). Класа test1 задаје црвену боју тексту, а класа test2 задаје величину фонта од 20px. Другом пасусу је дата само класа test1 (тај пасус постаће црвен), а трећем пасусу - класа test2 (овај пасус ће имати величину фонта од 20px). Први пасус, коме је дато две класе, иматиће истовремено и црвену боју и величину фонта од 20px:

<p class="test1 test2">Пасу са две класе test1 и test2.</p>
<p class="test1">Пасу са класом test1.</p>
<p class="test2">Пасу са класом test2.</p>
<p>Контролни пасус без класа.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Погледајте такође

атрибут id,
који задаје јединствене идентификаторе елементима