Атрибут class у HTML — прив'язка стилів до елемента

Атрибут class задає стильовий клас, який дозволяє зв'язати певний тег зі стильовим оформленням.

Атрибут class, в основному, використовується для вказівки на клас в каскадній таблиці стилів (CSS). Тим не менш, він також може бути використаний в JavaScript (через HTML DOM), щоб внести зміни в HTML елемент з зазначеним класом.

правити

Загальний опис

правити

Порада

У HTML4 імена класів можуть містити в собі латинські букви (A-Z, a-z), цифри (0-9), символ дефіса (-) і підкреслення (_) і не повинні починатися з цифри. Використання кирилиці в класах неприпустимо. У HTML5 ці обмеження зняті, але для сумісності зі старими браузерами і JavaScript рекомендується дотримуватися цих правил.

автор: с3с правити

Нотатка

При вказівці імені класу враховується регістр символів. Відтак «classname» і «ClassName» два різних ідентифікатора.

автор: с3с правити

Нотатка

Атрибут class дозволяє одночасно задавати кілька імен класу, розділяючи їх знаком пригалини. Це дозволяє застосувати кілька CSS класів для одного HTML елемента.

автор: с3с правити

+ додати пораду чи нотатку

Синтаксис

<element class="classname">

Атрибут class може отримувати єдине значення:

classname

Задає один або кілька імен класів для елемента.

Правила іменування:

• Назва класу повинна починатися з літери A-Z або a-z
• Назва класу може містити: літери (A-Z, a-Z), цифри (0-9), дефісів ("-") та підкреслення ("_")
• В HTML, всі значення чутливі до регістру

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	≤4	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	≤3.2

Приклади

+ запропонувати свій приклад у пісочниці

<p style="color:red;text-decoration:underline;text-decoration-style:double;font-size:20px;">Текст без використання атрибуту class</p>
<p style="color:red;text-decoration:underline;text-decoration-style:double;font-size:20px;">Текст без використання атрибуту class</p>
<br>
<p class="textStyle">Текст з використання атрибуту class</p>
<p class="textStyle">Текст з використання атрибуту class</p>

.textStyle{
  color:red;
  text-decoration:underline;
  text-decoration-style:double;
  font-size:20px;
}

<p class="textStyle textStyle1">Текст з використання декількох атрибутів class</p>

.textStyle{
  color:red;
  text-decoration:underline;
  text-decoration-style:double;
  font-size:20px;
}

.textStyle1{
  background:yellow;
  display:block;
}

<p class="a b">class="a b"</p>
<p class="b a">class="b a" — вигляд той самий, порядок у атрибуті нічого не змінює</p>
<p class="a">лише .a</p>
<p class="b">лише .b</p>
<p class="a b hot">class="a b hot" — виграє .hot, бо його правило нижче в CSS</p>
<p class="card" class="wide">class="card" class="wide" — другий атрибут браузер викинув, рамки немає</p>

p {
  padding: 5px 9px;
  margin: 4px 0;
  background: #f2f2f2;
  font-family: monospace;
}
.a {
  color: #0172ad;
}
.b {
  color: #c92a2a;
}
.hot {
  color: #7048e8;
  background: #fff3bf;
}
.wide {
  border: 3px solid #2f9e44;
}