Здравствуйте уважаемые посетители Российской школы CSS! Наша очередная статья по CSS будет посвящена довольно важному для валидации и корректной работы вопросу CSS и HTML – различиям между атрибутами class и id.

Начнем с определений.
Id – уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id. В HTML записывается, например, так:

<div id=”test”>Содержание блока</div>

В CSS, стили для id, записываются так:

#test {font: 12px Arial;}

Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конструкций, например, публикаций на нашем сайте. В HTML записывается, например, так:

<div class=”test”>Содержание блока</div>

В CSS, стили для id, записываются так:

.test {font: 12px Arial;}

Не всегда можно сразу понять отличия этих атрибутов, поэтому рассмотрим их подробно:

1. Разная значимость атрибутов в CSS.
Id имеет больший вес, а значит стили под этим атрибутом – значительнее. 
Например:

<div id=”test” class=”test2”>Содержание блока</div>

#test { font-size: 12px; } .test2 { font-size: 14px; }

Текст в блоке получится размером 12 пикселей, а не 14, как того требует class.

2. Возможность проставления якорных ссылок.
Использования атрибута id позволяет поставить якорную ссылку на объект страницы.
Например:

<div id=”test”>Содержание блока</div>

Ссылка на содержания блока будет иметь следующий вид:

http://site.ru/cat/#test

Якорные ссылки чаще всего используются в длинных документах для мгновенного перемещения.

3. Дополнительные функции id.
Для атрибута id существует функция .getElementById(). Об её использовании – подробно написано в уроке CSS №25. 

4. Запись множественных атрибутов.
Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:

<div class=”test test2”>Содержание блока</div>

При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:

.test.test2 { font-size: 14px; }

Для id – будет так:

#test, #test2 { font-size: 14px; }

Вот и все основные отличия атрибута id от class. Спасибо за внимание!