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

Глобальный атрибут class — это список классов элемента, разделённых пробельными символами ASCII.

Попробуйте

<p>Narrator: This is the beginning of the play.</p>

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>

<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

.note {
  font-style: italic;
  font-weight: bold;
}

.editorial {
  background: rgb(255 0 0 / 0.25);
  padding: 10px;
}

.editorial::before {
  content: "Editor: ";
}

Синтаксис

Атрибут class представляет собой список значений классов, разделённых пробельными символами ASCII.

Каждое значение класса может содержать любые символы Unicode (за исключением, конечно, пробельных символов ASCII). Однако при использовании в селекторах CSS — как из JavaScript с помощью API, таких как Document.querySelector(), так и в таблицах стилей CSS — значения атрибута class должны быть допустимыми идентификаторами CSS. Это означает, что если значение атрибута class не является допустимым идентификатором CSS (например, my?class или 1234), его необходимо экранировать перед использованием в селекторе — с помощью метода CSS.escape() или вручную.

Поэтому разработчикам рекомендуется выбирать для атрибутов class такие значения, которые являются допустимыми идентификаторами CSS и не требуют экранирования.

Описание

Классы позволяют CSS и JavaScript выбирать и получать доступ к определённым элементам с помощью селекторов классов или таких функций, как document.getElementsByClassName().

Хотя спецификация не устанавливает требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не его представление. Например, attribute для описания атрибута вместо italics, хотя элемент этого класса может отображаться курсивом. Семантические имена остаются логичными, даже если представление страницы меняется.

Спецификации

Совместимость с браузерами

См. также

• Все глобальные атрибуты.
• element.className
• element.classList
• Введение в CSS