HTML Атрибут class

Атрибут class в HTML предназначен для задания класса для HTML элемента.

Несколько HTML-элементов могут использовать один и тот же класс.

Атрибут class

Атрибут class часто применяется для указания имени класса в таблице стилей. Его также можно использовать в JavaScript для доступа и изменения элементов по имени класса.

В следующем примере есть три элемента <div> с атрибутом class со значением «city». Все три элемента будут иметь одинаковое оформление согласно определению стиля .city в секции заголовка:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>Лондон</h2>
  <p>Лондон — столица Англии.</p>
</div>

<div class="city">
  <h2>Париж</h2>
  <p>Париж — столица Франции.</p>
</div>

<div class="city">
  <h2>Токио</h2>
  <p>Токио — столица Японии.</p>
</div>

</body>
</html>

В следующем примере есть два элемента <span> с атрибутом class со значением «note». Оба элемента получат одинаковое оформление согласно стилю .note в разделе заголовка:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>Моя <span class="note">важная</span> надпись</h1>
<p>Это важный <span class="note">текст</span>.</p>

</body>
</html>

Советы:

Атрибут class можно использовать с любым HTML элементом.
Имя класса чувствительно к регистру символов!

Синтаксис класса

Чтобы создать класс, напишите точку (.) и затем имя класса. Затем задайте стили CSS в фигурных скобках {}:

Пример

Создание класса с названием «city»:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">Лондон</h2>
<p>Лондон — столица Англии.</p>

<h2 class="city">Париж</h2>
<p>Париж — столица Франции.</p>

<h2 class="city">Токио</h2>
<p>Токио — столица Японии.</p>

</body>
</html>

Назначение нескольких классов

Один HTML элемент может принадлежать сразу нескольким классам.

Чтобы задать несколько классов, разделите названия классов пробелами, например <div class="city main">. Элемент получит стили, соответствующие всем указанным классам.

В следующем примере первый элемент <h2> принадлежит одновременно классам «city» и «main» и получит стили обоих классов:

Пример

<h2 class="city main">Лондон</h2>
<h2 class="city">Париж</h2>
<h2 class="city">Токио</h2>

Разные элементы могут использовать один и тот же класс

Разные HTML элементы могут обращаться к одному и тому же имени класса.

В данном примере оба элемента <h2> и <p> указывают на класс «city» и будут иметь одинаковые стили:

Пример

<h2 class="city">Париж</h2>
<p class="city">Париж — столица Франции</p>

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

Имя класса также может использоваться в JavaScript для выполнения определенных действий с элементами.

JavaScript получает доступ к элементам с определенным именем класса при помощи метода getElementsByClassName().

Пример

Щелчок по кнопке скрывает все элементы с именем класса «city»:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Краткий обзор главы

Атрибут class в HTML задаёт одно или несколько имён классов для элемента.
Классы применяются в CSS и JavaScript для выбора и доступа к нужным элементам.
Атрибут class можно использовать для любого HTML элемента.
Имя класса чувствительно к регистру.
Несколько HTML элементов могут использовать одно и то же имя класса.
JavaScript может получать доступ к элементам с конкретным именем класса с помощью метода getElementsByClassName().