Поиск

ID-селекторы

Язык документа может содержать атрибуты типа ID. Их отличие от других атрибутов заключается в том, что любые два из них обязательно имеют различные значения. Независимо от языка документа атрибут ID может использоваться для уникальной идентификации элементов. В HTML-документах все атрибуты ID обозначаются "id", а в XML-документах атрибуты ID могут обозначаться по-другому, но для них справедливо то же самое ограничение.

Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ "#", непосредственно за которым следует значение атрибута ID.

Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно "chapter1":

H1#chapter1 { text-align: center }

В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно "z98y". Т.е. это правило будет сопоставляться элементу P:

<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>

Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно "z98y". В этом примере данное правило не сопоставляется элементу P:

<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем [ID=p123].

Примечание. В XML 1.0 [XML10] информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей не всегда просматривают DTD и поэтому не всегда могут иметь информацию об идентификаторе элемента. Если разработчик таблицы стилей знает или предполагает, что подобное может случиться, то он должен использовать обычные селекторы атрибутов вместо ID-селекторов: [name=p371] вместо #p371. Порядок каскадирования обычных селекторов атрибутов отличается от порядка каскадирования ID-селекторов. Возможно, при этом понадобится добавить в объявления приоритет "!important": [name=p371] {color: red ! important}. Естественно, что элементы в документах XML 1.0, не использующих DTD, вообще не имеют атрибута ID.