HTML глобальный атрибут class

Определение и применение

Глобальный атрибут class задает одно или несколько имен классов для элемента (указывает на класс в таблице стилей). Он также может быть использован в JavaScript для внесения изменений в элементы HTML с указанным классом.

Некоторые правила наименования классов:

  • Для удобства используйте латинские буквы, цифры, дефисы и подчёркивания; это рекомендация, а не ограничение HTML.
  • Имя класса в HTML может начинаться с цифры, но в CSS такой селектор требует экранирования: проще выбрать имя item-50. Имя -vottakvot допустимо и без экранирования.
  • учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Несколько классов записывайте в одном атрибуте: class="toy favorite". Не повторяйте атрибут class на одном элементе. Имена лучше выбирать по назначению, например product-card, чтобы они оставались понятными после смены цвета и расположения.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.global_attributes.class
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
class✓1✓12✓1✓15✓≤4✓18✓4✓14✓≤3.2✓1.0✓4.4✓≤3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Значения атрибута

Значение
classname

Порядок имён в class="toy favorite" не определяет приоритет CSS-правил. Приоритет зависит от каскада, специфичности и порядка правил в таблицах стилей.

Примеры, попробуйте сами

Глобальный атрибут class

Перенесите class на другой абзац.

index.html
HTML
<p class="note">Сообщение</p>
<p>Обычный абзац</p>
style.css
CSS
.note {
    background: #ffe29a;
    padding: 12px;
}

Отличия HTML 4.01 от HTML 5

В HTML5, атрибут class может быть использован к любому элементу HTML (пройдёт валидацию), но в некоторых случаях в этом нет необходимости.

В HTML 4.01, атрибут class не может быть применён к следующим элементам: