на главную
Каскадные таблицы стилей CSS2

ID селекторы

Атрибут ID задает HTML элементу уникальный в пределах документа идентификатор, который может быть использован в различных целях, в частности, для задания стиля этому элементу. Значение атрибута ID отделяется от имени HTML-элемента символом #. Символ * вместо конкретного имени HTML-элемента сопоставляет правило стиля любому элементу, у которого значение атрибута ID равно указанному. Как уже отмечалось в предыдущем разделе, символ * можно опускать, т.е. следующие определения равносильны:

*#comment {color:red}
 #comment {color:red}

Например, пусть описаны (скажем, во внешнем файле) следующие правила стиля:

h1#special {color:green}
#comment {color:red}

Первое правило (зеленый цвет символов) будет сопоставлено элементу h1, у которого значение атрибута id равно special.
Второе правило (красный цвет символов) будет сопоставлено любому элементу, у которого значение атрибута id равно comment.

В отличие от элементов, которым сопоставлен определенный класс CSS (см. Селекторы класса) и которых в документе может быть много (скажем, терминов, цитат, сносок, комментариев и т.д.), элемент с заданным id должен быть уникален в пределах документа. Смысл такого подхода становится ясным, когда мы представим себе некий шаблон документа, в котором крупные структурные блоки снабжены уникальными идентификаторами. Естественные практически для любого сайта блоки такого типа легко представить: шапка, основная навигация, дополнительная навигация, зона контента, подвал и т.д.  И в каждом из этих блоков могут быть заголовки, гиперссылки, абзацы...  И они обязаны выглядеть по-разному.

Сославшись на id, каждому структурному блоку мы можем задать общие параметры его отображения. А используя селекторы потомков - конкретизировать, как же в этом блоке должен выглядеть тот или иной его элемент: заголовок, гиперссылка, список и т.д.

Вот условный пример. Есть некий блок навигации (присвом ему id со значением nav). В этом блоке есть заголовок h1 и ссылки a, структурно оформленные как содержимое элементов списка li (кстати, это типичное решение). Представим следующий код HTML.

<div id="nav">
 <h1>заголовок меню...</h1>
 <ul>
  <li><a href="...">1 ссылка</a></li>
  <li><a href="...">2 ссылка</a></li>
  <li><a href="...">3 ссылка</a></li>
  ...
 </ul>
</div>

А вот так могло бы выглядеть описание стилей:

#nav {... описание внешнего вида блока в целом}
#nav ul {... описание списка в этом блоке}
#nav ul li {... описание элементов этого списка}
#nav ul li a {... описание гиперссылок в списке}			

Заметьте, мы здесь в составном селекторе используем селекторы потомков, указывая вложенность элементов в соответствующие контейнеры. Скажем, последнее описание утверждает следующее. Внутри элемента с id=nav (#nav) в списке (ul) в элементе списка (li) гиперссылка (a) должна отображаться так, как указано в фигурных скобках (согласно CSS).

Исключительно для красоты словесной формулировки можно попробовать перечислить элементы составного селектора справа налево. Тогда расшифровка смысла селектора  #nav ul li a  получится примерно такая. Гиперссылки (a), являющиеся элементами (li) списка (ul) в блоке с id=nav отображаются так, как указано в фигурных скобках (согласно CSS).

Кстати, в процессе разработки сайта на базе любой SMS, необходимо уметь работать со сложными селекторами, в частности - с id-селекторами. Ибо CMS создаст каркас страницы с десятками вложенных элементов div (и у всех будет либо уникальный id, либо некий класс) . И при формировании своей "темы оформления" придется тщательно указывать стили для всех сгенерированных блоков и вложенных элементов.