1. Селекторы

Селекторы

Итак, селектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Простой селектор представляет собой селектор типа, селектор класса либо id-селектор, за которым могут следовать селекторы псевдоклассов и селекторы атрибутов (о последних в данном кратком описании умолчим).

Селектор - это последовательность простых селекторов, разделенных пробелами либо символами ">" и "+" . Указанные разделители имеют следущий смысл.

• Пробел в последовательности селекторов соответствует понятию "селектор потомков".
• Символ ">" в последовательности селекторов соответствует понятию "дочерний селектор".
• Символ "+" в последовательности селекторов соответствует понятию "сестринский селектор".

Селекторы можно (и в ряде случаев, ради рациональности, нужно) группировать, разделяя запятыми. Например, следующая последовательность одинаковых объявлений, задающих цвет символов заголовков первых трех уровней:

h1 { color: navy; }
h2 { color: navy; }
h3 { color: navy; }

равносильна

h1, h2, h3 { color: navy; }

Селекторы потомков

Можно применять к HTML-элементу определенный стиль в зависимости от того, вложен ли этот элемент в другой (то есть, является ли его потомком). Для этого названия элементов перечисляются в порядке их предполагаемой вложенности и разделяются пробелами. В следующем примере описывается селектор, согласно которому заголовки 1-го уровня (элемент h1) будут выведены красным цветом только внутри ячеек таблиц (td). Причем, внутри ВСЕХ ячеек ВСЕХ таблиц (даже если есть вложенные таблицы).

td h1 { color: red; }

Дочерние селекторы

В ряде случаев нас интересуют не все "потомки" некоего структурного элемента, но лишь непосредственные - не "внуки" или "правнуки", а только "дети" (child). Для указания того, что правило стиля относится только к непосредственному потомку, в селекторе используется символ ">". В следующем примере приведен селектор, согласно которому в ячейке (td) nтаблицы (table) некоего класса "special" заголовок 1-го уровня (h1) будет выведен красным цветом. Заметьте, что если в ячейке есть вложенная таблица, к заголовкам в ее ячейках это описание уже не относится.

table.special td>h1 { color: red; }

Сестринские селекторы

Сестринские селекторы используются в случаях, когда существенно, что некие структурные элементы являются потомками одного родительского и один из них непосредственно предшествует другому. В этом случае в селекторе используется символ "+".

Следующий пример иллюстрирует вполне реальную ситуацию. Как правило, уместно отделять заголовки от предшествующего текста значительным отступом (свойство margin-top). Такой отступ можно было бы задать, например, со значением 20-30 px. И это хорошо выглядит, если между заголовками разных уровней есть какой-то вводный текст. Но может оказаться, что в ряде случаев, скажем, между заголовками 1-го и 2-го уровня такого текста нет. То есть, эти заголовки непосредственно следуют один за другим. Тогда повышенный отступ явно не нужен.

Итак, следующие правила стиля говорят о том, что заголовок 2-го уровня (h2), как правило, отделяется от предшествущего текста отступом 30px. Но в случае, когда он идет непосредственно за заголовком 1-го уровня (h1), этот отступ снижается до 15px. Во втором объявлении использован сестринский селектор.

h2 { margin-top: 30px;}

h1+h2 { margin-top: 15px;}