Предисловие: статья не нашего авторства. Скопирована из портала для разработчиков "HTML5 | Yocton". Ссылку на эту статью принесла @satsana, в ответ на вопрос о классах идентификаторах. Встречается такое что люди не видят разницы и используют их неправильно. В этом уроке и будет рассказано что это, в чём различие и как надо правильно использовать. Приятного чтения!

© "HTML5 | Yocton"

Классы и идентификаторы облегчают обращение к элементам HTML из сценариев и таблиц стилей. Атрибут class может использоваться в одном или нескольких тегах и используется для стилизации. Но идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Идентификаторы обычно используются с JavaScript и ссылками внутри документа и не рекомендуется в CSS. В этом разделе содержатся полезные пояснения и примеры относительно правильного использования атрибутов класса и идентификатора в HTML.

Присвоение класса элементу
Классы указывают признак для элементов. Используйте атрибут class, чтобы назначить класс элементу.

<div class="example-class"></div>

Чтобы назначить несколько классов элементу разделите имена классов пробелами.

<div class="class1 class2 class3"></div>

Использование классов в CSS
Классы могут использоваться для стилизации определенных элементов без изменения всех элементов данного типа. Например, эти два элемента span могут иметь совершенно разные стили:

<span></span>
<span class="special"></span>

Множество элементов могут иметь одинаковые классы и все они получат стиль, связанный с этим классом. Это всегда будет верно, если внутри CSS вы не укажете элемент. Например, у нас есть два элемента: оба с классом highlight:

<div class="highlight">Некоторый текст</div>
<span class="highlight">Некоторый текст</span>

Если ваш стиль такой, как показано ниже, то оба элемента будут содержать зеленый текст:

.highlight { color: green; }

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

div.highlight { color: green; }

Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight), а не элементы с классами (например, div.highlight). Как и любой другой селектор, классы могут быть вложенными:

.main .highlight { color: red; } /* селектор потомка */
.footer > .highlight { color: blue; } /* дочерний селектор */

Вы также можете связать селектор классов только с элементами, имеющими определенную комбинацию из нескольких классов. Например, если это наш HTML:

<div class="special left menu">Этот текст должен быть розовым</div>

И мы хотим покрасить текст этого элемента в розовый цвет, то можем написать в CSS следующее:

.special.left.menu { color: pink; }

Присвоение идентификатора элементу
Атрибут элемента id - это идентификатор, который должен быть уникальным во всем документе. Его цель состоит в том, чтобы однозначно идентифицировать элемент при ссылке на него, написании сценариев или стилизации (с помощью CSS).

<div id="example-id"></div>

У вас не должно быть двух элементов с одинаковым идентификатором в одном документе, даже если атрибуты привязаны к двум различным типам элементов. Например, следующий код неверен:

Браузеры сделают все возможное, чтобы выполнить этот код, но может возникнуть неожиданное поведение при стилизации или добавлении функциональности с помощью JavaScript.
Чтобы ссылаться на элементы по их идентификатору в CSS используйте префикс # перед идентификатором:

#example-id { color: green; }

Чтобы перейти к элементу с идентификатором на заданной странице, добавьте # с id элемента в URL-адрес:

http://example.com/about#example-id

Эта функция поддерживается в большинстве браузеров и не требует дополнительной работы JavaScript или CSS.

Допустимые значения

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

<div id="container"> ... </div>

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

<div class="results"> ... </div>
<div class="results"> ... </div>

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

Он не допустим в CSS.

В большинстве случаев лучше избегать символов, у которых есть ограничения или особый смысл.

Дублирование идентификаторов
Наличие более одного элемента с одним и тем же идентификатором трудноустранимая проблема. Парсер HTML все равно попытается отобразить страницу и обычно ошибка не возникает. Но она легко может привести к неправильной веб-странице. В этом примере:

Селекторы CSS будут еще работать

#aDiv {
color: red;
}

Но JavaScript не справляется с обоими элементами:

В этом случае переменная html будет содержать только первое содержимое div («a»).