Атрибут ID позволяет назначить идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. ID-селектор содержит символ «#», непосредственно за которым следует значение атрибута ID.
Например, следующий ID-селектор сопоставляется элементу HI, значение атрибута ID которого равно chapter7:
Hl#chapter7 { text-align: center }
В примере из листинга 1.63 правило стиля сопоставляется элементу, у которого значение атрибута ID равно «first». Это значит, что данное правило будет сопоставляться элементу Р.
Листинг 1.63. ID-селектор сопоставляет правило любому тегу
<ТIТLE>Глава 7</ ТIТLE > <STYLE type="text/css">
*#first { letter-spacing: 0.3em }
</STYLE> </HEAD> <BODY>
<p id=z98y>TeKCT абзаца</Р>
</BODY>
Однако в примере из листинга 1.64 это правило стиля будет сопоставляться только элементу H1, у которого значение атрибута ID равно first. В этом примере данное правило не сопоставляется элементу Р.
Листинг 1.64. ID-селектор сопоставляет правило только тегу H1
<HEAD>
< ТIТLE >Глава 9</TITLE> <STYLE type="text/css">
Hl#first { letter-spacing: 0.5em } </STYLE>
</HEAD>
<BODY>
<P id=first>TeKCT абзаца</Р> </BODY>
Отметим, что ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов.
Псевдоклассы и псевдоэлементы
В CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа. В большинстве случаев эта простая модель оказывается приемлемой, но иногда из-за особенностей структуры дерева документа она не позволяет воплотить некоторые действия. Например, в HTML нет элемента, который указывает на первую строку абзаца, и поэтому нет простого селектора CSS, который смог бы на нее указывать.
В CSS вводится понятие о псевдоклассах и псевдоэлементах, позволяющих осуще ствлять форматирование на основании информации, не включенной в дерево HTML-документа. Сразу отметим, что при задании имен псевдоклассов и псевдо-элементов учитывается регистр.