Главная » Полезные статьи » Разное » Забытые CSS-селекторы
Распечатать статью

Забытые 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:

1 p > strong {
2   color:#a00;
3 }

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

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

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

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

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

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

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

1 ul + p {
2   color:#a00;
3 }

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

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

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

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

[att]

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

1 a[title] {
2   color:#a00;
3 }

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

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

[att=val]

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

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

:first-child

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

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

:hover и :focus

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

1 tr:hover {
2   background:#eee;
3 }

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

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

1 textarea:focus {
2   color:#000;
3   background:#ffc;
4 }

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

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

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

1 p.info.error {
2   color:#900;
3   font-weight:bold;
4 }

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

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

Источник:   w3pro.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи