CSS селекторы

27 октября 2007, Написано в CSS

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

Тип селектора	Образец	Описание
Универсальный селектор	`*`	Применяется ко всем элементам
Селектор типа	`Е`	Применяется к элементу Е
Селектор класса	`.info`	Применяется к любому элементу, который имеет атрибут `class` со значением `info`
`Id` селектор	`#footer`	Применяется к любому элементу, который имеет атрибут `id` со значением `footer`
Вложенный селектор	`E F`	Применяется к любому элементу `F`, который является потомком по отношению к `E`
Дочерний селектор	`E > F`	Применяется к любому элементу `F`, который является дочерним по отношению к `E`
Смежный селектор	`E + F`	Применяется к любому элементу `F`, который является смежным по отношению к `E` (имеют одного родителя)
Селектор атрибута	`E[атрибут]`	Применяется к любому элементу `E`, который имеет атрибут, не зависимо от значения
Селектор атрибута	`E[атрибут="значение"]`	Применяется к любому элементу `E`, который имеет атрибут с заданным значением
Селектор атрибута	`E[атрибут~="значение"]`	Применяется в случае если значением атрибута элемента `E` является список «слов», разделенных пробелами, одно из которых в точности равно заданному. Если используется данный селектор, то слова, указанные в значении, не должны содержать пробелов (так как они уже используются для разделения слов)
Селектор атрибута	`E[атрибут\|="значение"]`	Применяется в случае если значением атрибута элемента `E` является список разделенных дефисом «слов», начинающийся с заданного слова
Псевдо-класс `:first-child`	`E:first-child`	Применяется к элементу `E`, когда он является первым дочерним элементом своего родителя
Псевдо-класс ссылки	`E:link` `E:visited`	Применяется к еще не посещенным ссылкам (`:link`) и уже посещенным (`:visited`)
Динамические псевдо-классы	`E:active` `E:hover` `E:focus`	Применяется к `E` в зависимости от действий пользователя
Псевдо-класс `:language`	`E:lang(c)`	Применяется к элементу `E` который соответствует языку `(c)`
Псевдо-класс `:first-line`	`E:first-line`	Применяется к содержимому первой строки элемента `E`
Псевдо-класс `:first-letter`	`E:first-letter`	Применяется к первой букве содержимого элемента `E`
Псевдо-классы `:before` и `:after`	`E:before` `E:after`	Используются для вставки генерируемого контента перед и после содержимого

Здесь я обнаружил еще несколько селекторов атрибутов, которых нет в официальном источнике.

Тип селектора	Образец	Описание
Селектор атрибута	`E[атрибут^="значение"]`	Применяется в случае если значение атрибута элемента `E` начинается с заданного слова
Селектор атрибута	`E[атрибут$="значение"]`	Применяется в случае если значение атрибута элемента `E` заканчивается заданным словом
Селектор атрибута	`E[атрибут*="значение"]`	Применяется в случае если заранее не возможно определить в каком месте значения атрибута находится заданное слово

Примеры использования:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
a[href^="http://"] {
 color: red
}
</style>
</head>
<body>
 
<p><a href="link1.html">Обычная ссылка</a> |
<a href="http://www.prodigy.ru" target="_blank">Ссылка на сайт Prodigy</a></p>
 
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
a[href$=".ru"] { /* Если ссылка заканчивается на .ru */
 color: red
}
 
a[href$=".com"] { /* Если ссылка заканчивается на .com */
 color: green
}
</style>
</head>
<body>
 
<p><a href="http://www.microsoft.com">Microsoft.Com</a> |
<a href="http://www.yandex.ru">Yandex.Ru</a></p>
 
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
[href*="mysite"] {
background: yellow
}
</style>
</head>
<body>
 
<p><a href="http://www.mysite.ru/html/">Моя страница</a> |
<a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> |
<a href="http://web-graphics.ru">Графика для Веб</a></p>
 
</body>
</html>

Дочерние, смежные и селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, но для корректной работы необходимо добавить правильный !DOCTYPE.

Таблица совместимости браузеров с CSS-селекторами, псевдо-элементами и псевдо-классами.

13 комментариев к статье «CSS селекторы»:

Nikita:

27 Окт 2007 в 17:08

Объясните, чем реально отличается дочерний селектор, от вложеного селектора?

Ответить
Alex:

27 Окт 2007 в 19:27

Дочерний селектор применяется к элементу который является прямым потомком своего родителя, а вложенный применяется к элементу независимо от уровня вложенности. Например em по отношению к div в первом случае
и во втором

Ответить
Nikita:

29 Окт 2007 в 09:53

Ясно, спасибо. На сколько я знаю очень многие селекторы не работают в IE6. Хотелось бы дополнить табличку таким ньюансом.

Ответить
- ni_x:
  
  23 Июл 2009 в 09:13
  
  Я думаю, что этот факт известен всем. IE6 как гвоздь в….
  Ну ничего, через год ослик сдохнет и мы все вздохнем спокойно.
  
  Ответить
Alex:

29 Окт 2007 в 10:05

А блок с восклицательным знаком не бросается в глаза?

Ответить
Nemesis:

29 Окт 2007 в 16:02

Тут всё гораздо нагляднее:
http://xhtml.ru/2007/01/20/css-selectors/

Ответить
Alex:

29 Окт 2007 в 16:15

Я уже оставил эту ссылку в конце поста. Согласен что нагляднее, вот если бы еще и описания самих селекторов были.

Ответить
lusever:

30 Окт 2007 в 15:52

Можно было еще подсветить примеры использования.

Ответить
quwi:

22 Янв 2008 в 07:33

Интересно! Спасибо =)

Ответить
dark_hero:

15 Окт 2009 в 19:16

вот тут еще можно посмотреть таблицу, какие селекторы и в каких браузерах на данный момент поддерживаются, а какие пока еще нет http://neoprizma.net/2009/10/15/css-selectors/

Ответить
Dimox:

17 Дек 2009 в 14:03

Селекторы – очень классная штука. Если бы их полноценно поддерживали все популярные ныне браузеры, верстать было бы значительно проще и приятнее.

Ответить
Инкогнито:

21 Янв 2010 в 13:18

«Здесь я обнаружил еще несколько селекторов атрибутов, которых нет в официальном источнике.»

Потому что это CSS3. Может поправить? А то создается впечатление «недокументированной возможности».

Ответить
Oleg:

11 Июн 2010 в 22:34

Дочерние, смежные и селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, но для корректной работы необходимо добавить правильный !DOCTYPE.
Какой именно !DOCTYPE нужно написать, что бы ишак нормально воспринимал селекторы атрибутов?

Ответить