Забытые CSS-селекторы

Версия для печати

Каждый, кто часто использовал CSS, вероятно был расстроен отсутствием поддержки селекторов в Internet Explorer 6. Существует довольно много случаев, когда селекторы CSS 2.1 позволяют использовать правила, работающие во всех других основных браузерах, но, если вы хотите, чтобы это работало и в IE 6, вам придётся добавить класс или идентификатор в HTML-код.

Наконец-то доля IE 6 на рынке находится на том уровне, когда мы как разработчики можем сказать, что сайт, поддерживающий IE 6, не значит "выглядящий совершенно". К счастью всё больше и больше пользователей это понимают. IE 7 вышел более трёх лет назад, а IE 9 ещё на горизонте, поэтому я думаю, пришло время воскресить css-селекторы, которые вы никогда не использовали только потому, что IE 6 не мог их понять.

Ниже представлено краткое описание некоторых наиболее полезных и тем не менее "забытых" селекторов CSS 2.1.

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

Дочерние селекторы указывают на непосредственные дочерние элементы и записываются в виде двух или более селекторов разделенных знаком ">".

Следующее правило соответствует элементам strong, непосредственным предком которых является элемент p:

p > strong {
  color:#a00;
}

То есть это правило будет применено к любому из элементов strong в этом примере:

<p><strong>Это</strong> всего лишь <strong>пример</strong> использования <strong>css-селекторов</strong></p>

Однако в следующем примере красный цвет шрифта будет установлен только у первого и последнего элемента strong, так как второй элемент находится внутри тега em и не является непосредственным потомком элемента p:

<p><strong>Это</strong> всего лишь <em><strong>пример</strong></em> использования <strong>css-селекторов</strong></p>

Смежные одноуровневые селекторы

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

Следующее правило будет применено ко всем элементам p, которым предшествует элемент ul:

ul + p {
  color:#a00;
}

Это правило будет применено к первому элементу p в примере:

<ul>
<li>атрибуты</li>
<li>селекторы</li>
</ul>
<p>Это всего лишь пример использования css-селекторов.</p>
<p>И ничего более.</p>

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

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

[att]

Этот селектор соответствует элементам, которые имеют атрибут att, вне зависимости от его значения. Следующее правило будет применено ко всем ссылкам, которые имеют атрибут title:

a[title] {
  color:#a00;
}

Это правило будет применено к первым двум ссылкам следующего примера, так как у них есть атрибут title:

<p>
<a href="#" title="Селекторы CSS">селекторы</a>, 
<a href="#" title="">селекторы атрибутов</a>, 
<a href="#">селектор :hover</a>
</p>

[att=val]

Соответствует элементам, которые имеют атрибут att с конкретным значением val. Следующее правило будет применено ко всем элементам input, которые имеют атрибут type, равный значению text, то есть ко всем текстовым полям ввода:

input[type=text] {
  color:#a00;
}

:first-child

Псевдо-класс :first-child соответствует только одному элементу, который является первым дочерним элементом какого-либо другого элемента. Следующее правило применяется к первому элементу li каждого упорядоченного списка в HTML-документе:

ol li:first-child {
  color:#a00;
}

:hover и :focus

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

tr:hover {
  background:#eee;
}

Следует помнить о том, что правила псевдо-класса :hover будут видны только при использовании мыши. Поэтому рекомендуется дополнительно использовать динамический псевдо-класс :focus, который будет применен к таким элементам как ссылки, поля ввода или кнопки при установки на них фокуса ввода клавиатуры.

Следующее правило применяется к любому элементу textarea, на который установлен фокус ввода:

textarea:focus {
  color:#000;
  background:#ffc;
}

Обратите внимание на то, что :focus не работает в IE 7.

Множественные селекторы класса

Вы можете назначить несколько классов одному элементу, а также можете создать селектор, который будет соответствовать элементам с определенным набором классов. Следующее правило будет применено к элементам p, которые имеют классы "info" и "error" одновременно:

p.info.error {
  color:#900;
  font-weight:bold;
}

И в заключение

Селекторы позволяют нам создать чистую HTML разметку, так как мы можем избавиться от назначения множества имён классов, а также использования JavaScript, который необходим только для достижения внешнего сходства в IE 6. Я не говорю, что вам следует отказаться от поддержки IE 6, который иногда необходим, но в котором всё выглядит как в веб-браузере, созданном восемь с половиной лет назад. И вообще должны ли веб-сайты выглядеть одинаково во всех браузерах?