Классы и идентификаторы

Атрибут Описание
class Указывает класс элемента (не уникальный)
id Указывает идентификатор элемента (уникальный)

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

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

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

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

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

Классы могут использоваться для стилизации определенных элементов без изменения всех элементов данного типа. Например, эти два элемента 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>

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

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

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

#example-id { color: green; }

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

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

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

Для HTML5 ограничениями на значение id являются:

  1. он должен быть уникальным в документе
  2. он не должен содержать пробелов
  3. он должен содержать хотя бы один символ

Таким образом, значением могут быть все цифры, только одна цифра, только знаки пунктуации, включая специальные символы, все что угодно. Просто не должно быть пробелов. Таким образом, нижеследующие объявления являются допустимыми:

<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=" "> ... </div>

Также неверен нижеследующий код, если включен в один документ:

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

Для HTML 4.01 и ниже для значения id всегда должно начинаться с буквы, а остальными символами могут быть:

  • латинские буквы (A-Z/a-z)
  • цифры (0-9)
  • тире ("-")
  • подчеркивания ("_")
  • двоеточия (":")
  • точки (".")

В этом случае в вышеприведённом примере для HTML5, допустим только один вариант:

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

Другие примеры, допустимые в HTML 4.01 и ниже:

<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 id="results"> ... </div>
<div id="results"> ... </div>

А это совершенно нормально:

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

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

<div id="9lions"> ... </div>

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

В CSS различные идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы из ISO 10646 U + 0080 и выше, а также дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра. ( 4.1.3 Characters and case )

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

  • The id attribute
  • The class attribute

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

    <div id="aDiv">a</div>
<div id="aDiv">b</div

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

    #aDiv {
color: red;
}

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

    var html = document.getElementById("aDiv").innerHTML;

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