Селекторами называют специальным образом записанные выражения, позволяющие применить правила форматирования некоторой группе элементов web-страницы:

селектор { правила форматирования ... }

Правила форматирования в фигурных скобках записываются с использованием того же синтаксиса, что и при использовании атрибута  style. Огромным преимуществом такого подхода по сравнению с внедренными стилями является возможность форматирования сразу группы элементов, имена и атрибуты которых удоалетворяют заданным условиям. Именно селекторы задают такие условия.

Селектор элемента

Одним из наиболее распостраненных селекторов является селектор элемента или тип элемента:

h1 {
 font-size: 14pt;
 color: #660000;
} 
p {
 text-align: justify;
}

В данном примере используется стиль для заголовков 1го уровня и абзацев документа. Выполнив пример и рассмотрев его исходный код (в нижней части) вы убедитесь в простоте и широте возможностей такого подхода. Как можно видеть в коде прмера, абзацы не содержат выравнивания, однако их содержимое выравнивается по ширине, как то задает стиль для селектора p.

Селектор class

Классы применяются, когда необходимо задать разные стили для одного тега или просто определить стиль для элемента веб-страницы. При использовании совместно с тегами синтаксис для классов будет следующий:

Элемент.КЛАСС { Правила стиля ... } 

Используется класс стиля путем указания атрибута  class с заданным значением у элементов заданного типа. К примеру, если класс и именем "с1" создан для абзаца (элемент "p"), то его нельзя использовать для форматирования, к примеру, заголовков.

Пример:

p { /* стиль обычного абзаца */
 text-align: justify;
} 
p.cite { /* создание класса альтернативного стиля абзаца */
 text-align: justify;
 font-style: italic;
 font-sise: 8pt;
 color: #999999;
} 

...
<!-- использование класса -->
<p class="cite">Селекторами называют ... </p>

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

.КЛАСС { Правила стиля ... } 

Таким образом, класс получится универсальным и может быть применен с одинаковым успехом как для абзацев, так и для заголовков и для остальных текстовых элементов страницы (если, конечно, речь идет о форматировании текста).

Селектор ID

Атрибут ID задает уникальное имя элемента, которое используется для изменения его стиля, обращения к нему скриптов или ссылок на элемент (см. урок по гиперссылкам).

Для назначения стиля элементу с заданным ID используется следующий синтаксис:

#идентификатор { правила форматирования } 

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

Селекторы ID удобно применять в сочетании с внешними таблицами стилей, подключаемыми в большое количество страниц, составленных по одному шаблону. К примеру, у каждой страницы есть "шапка" (header), завершающая часть (foother), главное меню (main_menu) и прочие повторяющиеся элементы, уникальные для каждой страницы в отдельности.

Пример:

/* селектор в CSS */
#copyright {
 txt-align: center;
 font-size: 10pt;
 font-weight: bold;
 color: #996633;
 border-top: 1px dashed black;
} 
 
<!-- Применение на странице -->
...
<p id="copyright">
 &copy; 2005, Артемов АН. Специально для студентов "КА ШАГ".
</p>

Селекторы по иерархии

Селекторы по иерархии, или контекстные селекторы, позволяют задавать правила оформления элементов, с учетом их места в общей иерархии элементов страницы, то есть - с учетом контекста. Так, например, можно по разному представлять обыкновенные абзацы и абзацы, вложенные в ячейки таблицы, простые гиперссылки и гиперссылки основного меню страницы и т.д.

При этом, не играет никакой роли, является ли элемент прямым потомком родителя или же нет. При создани контекстных селекторов, родительские селекторы перечисляются, разделяясь пробелом, от родителей к потомкам.

Ниже показан пример оформления абзаца, вложенного в ячейку таблицы:

td p {
 color: #660000;
}

Наиболее наглядным примером применения контекстных селекторов является создание правил автоматической нумерации многоуровневых упорядоченных списков. Просматривая материал одного из предыдущих уроков можно заметить, что для многоуровневых маркированных списков существует механизм смены маркера на каждом уровне вложенности (до 3го), реализованный по умолчанию. Для упорядоченных списком такого механизма по умолчанию не существует. Именно ликвидацией этого печального факта мы с вами и займемся.

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

<ol>
 <li>Элемент 1</li>
 <li>Элемент 2
 <ol>
 <li>Элемент 2.1
 <ol>
 <li>Элемент 2.1.1</li>
 <li>Элемент 2.1.2</li>
 <li>Элемент 2.1.3</li>
 </ol>
 </li>
 <li>Элемент 2.2</li>
 <li>Элемент 2.3</li>
 <li>...</li> 
 </ol>
 </li>
 <li>...</li>
</ol>

В общем и целом - вполне привычно, не так ли? А вот и таблица стилей:

/* 1й уровень */
ol { list-style-type: upper-roman; }
/* 2й уровень */
ol ol { list-style-type: decimal; }
/* 3й уровень */
ol ol ol { list-style-type: lower-alpha; }

Из примера видно, что ни сами списки, ни их элементы не содержат никаких дополнительных атрибутов, задающих смену типа нумерации. Это целиком и полностью является заслугой контекстных селекторов.

Псевдоклассы

Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий:

селектор:псевдокласс { Правила стиля }

Существуют следующие псевдоклассы:

• active - Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.
• link - Непосещенная ссылка.
• hover - Ссылка при наведенном курсоре мыши.
• visited - Посещенная ссылка.
• first-letter - Определяет стиль для первого символа текстового блока.
• first-line - Устанавливает стиль для первой строки текстового блока.

Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последние 2 - к любому текстовому блоку.

Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:

/* Стилевые правила */
a.rollover {
 color: #660000;
 text-decoration: none;
} 
a.rollover:hover {
 color: #FF0000;
 text-decoration: underline;
} 
 
<!-- Применение в HTML -->
...
<a class="rollover" href="#">Ссылка-ролловер</a><br />
<a href="#">Обычная гиперссылка</a> <br />

Группирование селекторов

Для оптимизации стилевых таблиц и сокращения набираемого кода часто можно использовать группирование селекторов, требующих применения одного и того же набора правил форматирования. Примером таких элементов могут служить элементы <b> и <strong> - оба они размечают текст полужирным шрифтом.

Допустим, вы желаете, чтобы текст, отмеченный одним (любым) из этих элементов был полужирным, темно-красным и имел подчеркивание. В этом случае вам придется воспользоваться следующим набором правил:

b {
 color: #660000;
 text-decoration: underline;
}
strong {
 color: #660000;
 text-decoration: underline;
}

Или воспользоваться группированием и записать предыдущие стили в более компактной форме:

b, strong {
 color: #660000;
 text-decoration: underline;
}

Оба варианта одинаково функционируют и не содержат ошибок. Однако второй вариант предпочтительнее к использованию, так как является более лаконичным и легче модифицируется при необходимости.

Группирование селекторов можно применить и в таком контексте: допустим, необходимо задать заголовкам всех уровней одинаковые свойства font-family, text-align и color и сделать их отличающимися только размерами текста:

/* Общие свойства */
h1, h2, h3, h4, h5, h6 {
 font-family: Tahoma;
 text-align: Center;
 color: navy;
} 

/* Индивидуальные свойства */
h1 { font-size: 18pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }
...