Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>

Как это работает

Чтобы атрибут class сработал, вам нужно не просто указать правильное имя класса, но и добавить его в CSS-файл или в теге <style>.

Подключаем класс

<span class="highlighted-text">Этот текст будет выделен.</span>

И настраиваем его в CSS:

.highlighted-text {
  background-color: yellow;
  font-size: 18px;
}

В этом примере текст внутри элемента <p> с классом highlighted-text будет иметь жёлтый фон и размер шрифта 18px.

Этот текст будет выделен.

Использование атрибута class в JavaScript

Мы можем работать с классами и через JS. Например, найти все элементы с классом clickable и добавить обработчик, который покажет сообщение при клике на элемент.

const elements = document.querySelectorAll('.clickable');

elements.forEach(element => {
  element.addEventListener('click', () => {
    alert('Клик!');
  });
});

Теперь, когда пользователь кликает на любую из кнопок с классом clickable, появляется всплывающее окно с сообщением Клик!.

Сложные селекторы в CSS

В некоторых случаях нам нужно применить класс только к определенному HTML-тегу, игнорируя все другие. Например, так:

/* Только для элементов <p> с классом special-text */
p.special-text {
  color: blue;
}

Тогда первый текст в этом случае будет синим, а второй — как есть.

<p class="special-text">Этот текст будет синим.</p>
<div class="special-text">А этот останется без изменений.</div>

Вот как это работает:

Разработчики постоянно используют атрибут class. Он не только упрощает стилизацию, но и помогает лучше организовать код и проще его поддерживать.

Подробнее о сложных селекторах — в отдельной очень подробной статье, обязательно прочитайте: