Атрибут class в HTML
Атрибут class задаёт одно или несколько имён классов для элемента и используется CSS и JavaScript для стилизации и изменения элементов.
Атрибут HTML class назначает элементу одно или несколько имён классов. Эти имена являются основным способом, с помощью которого CSS и JavaScript находят элемент, чтобы применить к нему стиль или изменить его.
Зачем использовать атрибут class
Важность классов объясняется принципом разделения ответственности. HTML описывает структуру страницы, тогда как оформление находится в таблице стилей. Атрибут class — это связующее звено между ними, и у этой связи есть два важных свойства:
- Переиспользование. Один и тот же класс можно применить к любому количеству элементов —
<h2>,<p>и<button>могут все разделятьclass="highlight"и получать одно и то же правило. Напишите стиль один раз и применяйте его везде. - Удобный инструмент выборки. Класс — это метка, по которой можно делать выборку. В CSS его выбирают с помощью точки (
.highlight); в JavaScript его находят или изменяют через DOM. Без классов пришлось бы стилизовать каждый элемент встроенно и постоянно повторяться.
В HTML5 атрибут class является глобальным атрибутом, поэтому его можно использовать на любом элементе.
class и id
И class, и атрибут id помечают элементы, чтобы их можно было выбрать, но они отвечают на разные вопросы:
idдолжен быть уникальным в документе — ровно один элемент несёт заданный id. Используйте его, когда имеете в виду конкретный отдельный элемент (обработчик в JavaScript, якорная ссылка на странице).classпереиспользуется — любое количество элементов может разделять один класс, и один элемент может иметь несколько классов. Используйте его всякий раз, когда стиль или поведение относятся к группе элементов.
В повседневной стилизации class — это то, что нужно в большинстве случаев, потому что дизайн строится из повторяющихся, общих паттернов.
Допустимые имена классов
Имя должно начинаться с буквы (a–z или A–Z), дефиса (-) или подчёркивания (_), а затем может содержать буквы, цифры (0–9), дефисы и подчёркивания. Имена классов чувствительны к регистру, поэтому card и Card — разные классы. Лучше называть классы исходя из назначения элемента, а не его внешнего вида — intro выглядит разумнее со временем, чем big-red.
<!-- Valid -->
<div class="my-card"></div>
<div class="_intro card2"></div>
<!-- Invalid -->
<div class="1card"></div> <!-- cannot start with a digit -->
<div class="my card"></div> <!-- a space here means TWO classes, not one -->Последняя строка — распространённый сюрприз: пробел внутри значения атрибута не создаёт одно имя с пробелом — он разделяет значение на несколько имён классов.
Синтаксис
<tag class="classname"></tag>Пример атрибута class в HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>В CSS, чтобы выбрать все элементы с определённым классом, напишите точку (.) перед именем класса. Полный набор способов выбора элементов см. в разделе CSS Selectors.
Пример атрибута class в HTML совместно с CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Атрибутом class можно также управлять из JavaScript через свойство элемента classList. Три наиболее используемых метода:
classList.add('name')— добавляет класс (ничего не делает, если класс уже присутствует).classList.remove('name')— удаляет класс.classList.toggle('name')— добавляет класс, если он отсутствует, и удаляет, если присутствует. Идеально подходит для состояний вкл/выкл, таких как «active» или «open».
Пример атрибута class в HTML совместно с JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click a button to change this paragraph's class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add</button>
<button onclick="document.getElementById('demo').classList.remove('highlight')">Remove</button>
<button onclick="document.getElementById('demo').classList.toggle('highlight')">Toggle</button>
</body>
</html>HTML-элементы также могут иметь более одного имени класса. Каждое из них должно быть отделено пробелом.
Пример атрибута class в HTML с несколькими именами классов
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Разные теги, например <h2> и <p>, могут иметь одинаковое имя класса и один и тот же стиль.
Пример атрибута class в HTML с элементами <h2> и <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Замечание о доступности
Имена классов не несут никакого смысла для скринридеров и других вспомогательных технологий — они существуют исключительно для стилизации и работы со скриптами. class="button" на <div> не будет объявлен как кнопка. Поэтому класс никогда не заменяет выбор правильного семантического элемента (используйте настоящий <button>) или добавление ARIA там, где это необходимо. Используйте классы для стилизации; используйте семантику для передачи смысла.
В HTML 4.01 атрибут class был запрещён для нескольких элементов уровня head (таких как <head>, <html>, <base>, <meta>, <script>, <style> и <title>). Это ограничение исторически обусловлено: в HTML5 class является глобальным атрибутом, допустимым для любого элемента, поэтому об этом больше не нужно беспокоиться.