«Экзотические» CSS-селекторы: обзор.

Не так давно вышла новая, восьмая версия браузера Internet Explorer, и все веб-мастера вздохнули с облегчением. Ведь наконец-то браузер от Microsoft, пусть и с огромным опозданием, начал более-менее уважительно относиться к спецификациям HTML и CSS и адекватно отображать веб-страницы. В общем-то, все ожидали этого еще от седьмой версии. Однако она, на первый взгляд, не принесла ничего нового, кроме поддержки использования вкладок. Но это только на первый взгляд… Мало кто знает еще об одном весьма значительном нововведении в IE7: именно в этой версии данный браузер впервые начал поддерживать новые виды CSS-селекторов.

Селектор – часть CSS-правила, которая указывает, к каким элементам его применять. Основные их виды известны практически всем веб-мастерам. Но не так уж много людей слышали про такую «экзотику», как соседние и дочерние селекторы, а также селекторы атрибутов. Это объясняется тем, что в их использовании долго не было никакого смысла, ведь один из самых популярных браузеров Internet Explorer не обеспечивал их поддержку. Однако сейчас ситуация поменялась, и открывшиеся новые возможности было бы не очень разумным оставлять в стороне. Именно поэтому я и решил написать этот небольшой обзор.

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

Указывают, что CSS-правило применяется к элементу только тогда, когда он является соседним по отношению к какому-либо другому элементу. Пример:

<strong>Элементы называются соседними</strong>, когда в коде страницы они <em>расположены рядом друг с другом</em>, и между ними <ins>нет никаких других элементов</ins>

Здесь соседними являются теги <strong> и <em>, а также <em> и <ins>. Теги <strong> и <ins> соседними не являются, поскольку между ними «вклинился» посторонний элемент <em>.

Синтаксис записи соседнего селектора следующий:

I элемент + II элемент {…}

Давайте составим такое правило для нашего примера:

strong + em { color: red; }
strong + ins { color: blue; }

Вот как будет выглядеть результат:

Как видишь, стиль изменился только для тега <em>, а тег <ins> не был затронут. Это очень хорошо иллюстрирует правило соседнего расположения.

Проведем еще один эксперимент - заменим в нашем примере <ins> на <em>:

<strong>Элементы называются соседними</strong>, когда в коде страницы они <em>расположены рядом друг с другом</em>, и между ними <em>нет никаких других элементов</em>

Как нетрудно догадаться, стиль второго из тегов <em> не изменится:

Это происходит потому, что он уже не будет являться соседним для <strong>.

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

Указывают, что CSS-правило применяется к элементу только тогда, когда он является дочерним по отношению к какому-либо другому элементу. Пример:

<p>Элемент называется дочерним по отношению к тому элементу, в который он вложен, если он <strong>является <em>непосредственным</em> потомком</strong> этого элемента</p>

Здесь дочерними являются тег <strong> по отношению к тегу <p>, а также <em> по отношению к <strong>. Тег <em> по отношению к тегу <p> дочерним не является, поскольку тот не является его непосредственным родителем.

Синтаксис записи следующий:

I элемент > II элемент { … }

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

p > strong { color: red; } /* Дочерний селектор */
p > em {color: blue; } /* Дочерний селектор */

Мы получим следующий результат:

В нашем случае тег <em> не является дочерним для <p>, поскольку находится на втором уровне вложенности в него. Естественно, что стиль, который должен сделать текст синим цветом, для него не «сработал».

Теперь заменим дочерний селектор на контекстный:

p > strong { color: red; } /* Дочерний селектор */
p em {color: blue; } /* Контекстный селектор */

Результат предсказуем:

В отличие от дочернего, контекстный селектор в данном случае «сработал», поскольку для него не важна глубина уровня вложенности.

Селекторы атрибутов

Указывают, что CSS-правило применяется только к тем элементам, которые содержат указанный в селекторе атрибут. Пример:

<p align=”center”>CSS – очень важная технология, без использования которой невозможно создать хоть сколько-нибудь приличный сайт</p>
<p>Основными понятиями CSS являются стилевые правила, селекторы, свойства и их значения.</p>

Здесь только первый абзац имеет определенный самостоятельно параметр (или атрибут, что одно и то же) align. Следовательно, CSS-правило для селектора атрибута align будет применяться именно к первому абзацу, и только к нему.

Синтаксис записи селектора атрибута:

[атрибут] { … }

Составим правило для нашего примера (для наглядности укажем в дополнение к атрибуту еще и сам тег, для которого его следует рассматривать):

p[align] { color: green; font-weight: bold; }

Нетрудно догадаться, что получится в итоге:

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

[атрибут=”значение”] { … }

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

[атрибут^=”значение”] { … }

Почти то же самое, только в этом случае атрибут должен лишь начинаться с указанного значения, а не обязательно содержать его целиком.

[атрибут$=”значение”] { … }

Аналогично, с той разницей, что здесь атрибут должен заканчиваться указанным значением.

[атрибут*=”значение”] { … }

Такая запись показывает, что значение может встречаться в любом месте атрибута.

Как видишь, соседние, дочерние и селекторы атрибутов дают нам много новых возможностей для написания эффективного CSS-кода. Можно придумать огромное количество примеров, в которых их использование будет предпочтительнее, чем «традиционных» всем известных селекторов. Поэтому я думаю, будет разумным взять эти приемы