Атрибут | Описание |
---|---|
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 являются:
Таким образом, значением могут быть все цифры, только одна цифра, только знаки пунктуации, включая специальные символы, все что угодно. Просто не должно быть пробелов. Таким образом, нижеследующие объявления являются допустимыми:
<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
всегда должно начинаться с буквы, а остальными символами могут быть:
В этом случае в вышеприведённом примере для 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 )
В большинстве случаев лучше избегать символов, у которых есть ограничения или особый смысл.
Наличие более одного элемента с одним и тем же идентификатором трудноустранимая проблема. Парсер 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»).