Атрибут 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,
който задава уникални идентификатори на елементи