CSS id и class
Используйте CSS ID-селектор для одного HTML-элемента, class — для нескольких. Узнайте разницу и примеры применения.
В предыдущей главе мы познакомились с селекторами. Теперь поговорим о селекторах id и class — двух атрибутных селекторах, к которым вы будете обращаться чаще всего при стилизации веб-страницы.
В этой главе рассматривается, что делает каждый селектор, как его записывать, чем они отличаются и — что не менее важно — когда выбирать один, а когда другой.
CSS id-селектор
id-селектор нацеливается на единственный HTML-элемент, атрибут id которого совпадает с заданным именем. Поскольку id должен быть уникальным в пределах страницы, id-селектор предназначен для стилизации одного конкретного элемента, а не группы.
Как во внутренних, так и во внешних таблицах стилей id-селектор записывается с символом решётки (#), за которым следует значение id: #name { ... }.
Пример id-селектора:
CSS ID-селектор для HTML-элемента
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Здесь мы задали второму абзацу id blue (id="blue") и объявили его стиль с помощью свойства color — #blue { color: #1c87c9; } — внутри секции <head>. Совпадает только этот один элемент, поэтому только второй абзац становится синим; первый и третий сохраняют цвет по умолчанию.
Значение id не может содержать пробелы и по соглашению не должно начинаться с цифры. Откройте пример в редакторе и убедитесь, что только второй абзац имеет цвет #1c87c9.
CSS class-селектор
Class-селектор нацеливается на каждый элемент, атрибут class которого содержит заданное имя. Используйте его, когда один и тот же стиль должен применяться к нескольким элементам — например, стиль .warning, общий для нескольких уведомлений, или стиль .btn, повторно используемый для многих кнопок.
Как во внутренних, так и во внешних таблицах стилей class-селектор записывается с точкой (.), за которой следует имя класса: .name { ... }.
Пример class-селектора:
Пример CSS class-селектора
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Здесь один и тот же класс blue применён к двум разным элементам — заголовку и абзацу (class="blue") — и стилизован один раз правилом .blue { color: #1c87c9; }. Заголовок и третий абзац принимают цвет #1c87c9, тогда как средний абзац (у которого нет класса) остаётся нетронутым. Определить правило один раз и использовать его повторно — именно для этого и нужны классы.
Несколько классов на одном элементе
Элемент может одновременно иметь несколько классов. Перечислите их в атрибуте class через пробел, и каждое совпадающее правило будет применено:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
font-size: 20px;
}
.highlight {
background-color: #ffe69e;
}
</style>
</head>
<body>
<p class="text highlight">This paragraph is both larger and highlighted.</p>
</body>
</html>Такая компонуемость делает классы рабочей лошадкой CSS: небольшие классы с единственной целью можно смешивать и сочетать по всей странице.
Разница между id и class
Ключевое различие — уникальность:
- id уникален — каждый элемент может иметь только один id, и на каждой странице должен быть лишь один элемент с заданным id. Повторное использование одного и того же id на нескольких элементах является недопустимым HTML и может нарушить работу скриптов и функций доступности, которые рассчитывают на уникальность id.
- class допускает повторное использование — один и тот же класс может встречаться на многих элементах, а у одного элемента может быть много классов.
| id | class | |
|---|---|---|
| Символ в CSS | # | . |
| Раз на странице | один | неограниченно |
| На элемент | один id | много классов |
| Типичное использование | уникальный элемент (например, шапка страницы, якорная ссылка) | повторяющиеся стили, компоненты |
id также имеет больший вес в каскаде, чем class. Когда правило с id и правило с class нацелены на один и тот же элемент, правило с id побеждает независимо от порядка источников — см. специфичность CSS через селекторы. Именно из-за этого лишнего веса многие руководства по стилю предпочитают классы для стилизации, а id оставляют для ссылок на части страницы (href="#section") и хуков JavaScript.
Что выбрать?
На практике используйте классы для стилизации. Они допускают повторное использование, легко переопределяются и сохраняют специфичность низкой и предсказуемой. Прибегайте к id только тогда, когда вам действительно нужен уникальный идентификатор элемента — для фрагментных ссылок, связок label/for в формах или getElementById в JavaScript.