CSS: чем отличаются class от id

На первый взгляд нет никакой разницы что использовать: id или class. Ведь присвоив одинаковые параметры CSS стилей для id и class - результат будет идентичен. На самом деле, отличий между id и class в CSS практичесски нет, за исключением приоритета их обработки. Но в некоторых других случаях, которые весьма часто используются в web-разработке, разница весьма ощутима. Эта статья как раз и выделяет все отличия class и id.

Id

Id - это уникальный идентификатор элемента. На одной странице один идентификатор применяется только единожды, хотя можно применять и несколько одинаковых идентификаторов в пределах одной страницы, но это может вызвать проблемы при использовании HTML-якорей и JS. Если попытаться присвоить одному элементу (HTML-тегу) два различных ID, то сработает только правила из первого (самого левого) ID

Пример 1: как не желательно использовать идентификаторы (ID)
<p id="my_id_r7t">Блок выделенного текста</p>
<!-- HTML -->
<p id="my_id_r7t">Блок выделенного текста</p>
Пример 2: как нельзя использовать идентификаторы (ID)
<p id="my_id_r7t" id="my_id_r9t">Присвоение двух или более id 1-му элементу не допускается</p>

В случае одновременного применения к одному элементу id и class, приоритет у ID будет выше, чем у class:

Определение стилей CSS
#my_id_r7t {color: green; font-weight: bold;}
.my_class_r7t {color: blue; font-style: italic;}
HTML с использованием стилей CSS
<p class="my_class_r7t" id="my_id_r7t">Этому абзацу присвоены класс my_class и идентификатор my_id.</p>

Этому абзацу присвоены класс my_class и идентификатор my_id.

Как видно, цвет приобрел значения, записанные в идентификаторе. Но если присмотрется внимательнее, то id и class могут с успехом дополнять друг-друга: жирный шрифт, заданный в идентификаторе сочетается с курсивным начертанием, записанным в class.

Если же дописать дескриптору <p> еще и стиль: <p class="my_class_r7t" style="color: grey" id="my_id_r7t">, то результат будет таким:

Самым высоким приоритетом обладает стиль, присвоенный дискриптору с помощью style="...".

Хороший пример приоритетов, приведен в официальной документации по CSS (eng). В кратце, приоритеты в порядке убывания таковы: style, id, class, стиль тега.

Элемент id может быть применён в качестве HTML-якоря, вместо более древней конструкции <a name="imya_jakorya"></a>, для того, чтобы можно было сослаться на определенную часть страницы, без ее перезагрузки с попомщью <a href="#imya_jakorya">Наверх</a>. Если на странице окажется несколько идентичных id, возникнет неоднозначная ситуация.

При программировании страниц с помощью JS, зачастую используется функция getElementById(), которая также "рассчитывает" на то, что идентификатор должен быть уникальным. В противном случае могут возникнуть ошибки в коде.

Class

При использовании class, одному HTML-дескриптору можно назначить стили из нескольких классов одновременно:

.my_class_r7t {color: blue; font-style: italic;}
.my_class_ffR5 {color: black; background-color: #fafafa; padding: 3px; border: 1px solid #757575; margin-left: 30px;}

Имена различных классов записываются через пробел:

<p class="my_class_ffR5 my_class_r7t">Пример применения 2-ух различных классов для 1-го HTML-тега.</p>

Как это выглядит, смотрите ниже:

Результат применения двух различных классов для 1-го дескриптора HTML.

Классы my_class_r7t и my_class_ffR5 устанавливают различные цвета содержимому HTML-тега. Использован будет тот цвет, который определен в файле стилей позже (в данном случае class my_class_ffR5 записан после my_class_r7t). Порядок применения классов в самом HTML-дескрипторе значения не имеет.

Чтобы назначить составным классам уникальное стилевое оформление, они записываются вместе, без проблеов:

.my_class_bbbb755 {font-weight: bold;}
.my_class_ffR5.my_class_bbbb755 {text-align: right;}

Выравнивание по правому краю, будет применено только в случае, когда одному HTML-дескриптору присвоено сразу 2 класса:

<p class="my_class_ffR5 my_class_bbbb755">Пример применения стилей для составных классов</p>

Как это выглядит, смотрите ниже:

Пример применения стилей для составных классов

Один и тот же class, в отличае от id, можно без проблем присваивать не ограниченному кол-ву различных элементов:

<div class="my_class_ffR5">...</div>
<p class="my_class_ffR5">...</p>
<h5 class="my_class_ffR5">...</h5>
<div class="my_class_ffR5">...</div>
<p class="my_class_ffR5">...</p>

Class или id - что использовать?

На самом деле, нельзя выбирать, что использовать: class или id. Это на подобии, как выбирать, что лучше: есть или пить? Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы нечаяно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.

Опубликовано: 2011/06/07
HTML-код ссылки на эту страницу:
<a href="https://petrenco.com/html_css.php?txt=50" target="_blank">CSS id или class</a>
82875
Комментарии
Полезная статья
Статья познавательная, только заметил ошибку:

"приоритеты в порядке убывания таковы: style, id, css, стиль тега."

скорее всего Вы имели в виду: "style, id, class, стиль тега."

Спасибо, исправил.
Спасибо, учитель!
Спасибо.
Познавательная статья. То , что надо. Большое спасибо!
Познавательная статья. То , что надо. Большое спасибо!
Сэнсэй, аригато!
Добавить комментарий
Ваш e-mail: (не виден посетителям сайта)
Ваше имя:
Комментарий:
Символы с картинки:
Только выделенные поля формы добавления комментариев обязательны к заполнению.