CSS-селекторы

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

  OP9 FF2 IE6 IE7 Saf3
win

*

* {
}
 д д д д д

 E

div {
}
д д д д д

E F

div p {
}
д д д д д

E > F

div > div {
}
д д н д д

E:first-child

div:first-child {
}
о о н о о

E:link

a:link {
}

 страница x.html еще не посещалась


 страница y.html уже посещалась
д д д д д

E:visited

a:visited {
}

 страница x.html еще не посещалась


 страница y.html уже посещалась
д д д д д

E:lang(c)

:lang(ru) {
}
д д н н о

E + F

h1 + p {
}
д д н д д

E[attribute]

td[align] {
}
д д н о д

E[attribute=value]

td[align=left] {
}
д д н д о

E[attribute~=value]

a[rel~=new] {
}
д д н д о

E[attribute|=value]

div[lang|=en] {
}
д д н д о

E[attribute^=value]

td[class^=left] {
}
д д н д о

E[attribute$=value]

td[class$=left] {
}
д д н д о

E[attribute*=value]

td[class*=left] {
}
д д н д о

E.class

div.first {
}
д д о д д

E#id

#first {
}
д д д д д

E:before

p:before {
  content: "Новый "; color: green;
}

параграф

пример:
Новый параграф

 д д н н д

E::before

p::before {
  content: "Новый "; color: green;
}

параграф

пример:
Новый параграф

 д д н н д

E:after

p:after {
  content: " параграф"; color: green;
}

Новый

пример:
Новый параграф

 д д н н д

E::after

p::after {
  content: " параграф"; color: green;
}

Новый

пример:
Новый параграф

 д д н н д

E:first-letter

p:first-letter {
  font-size: 3em; color: green;
}

Новый параграф

пример:
Новый параграф

 д д д д д

E::first-letter

p::first-letter {
  font-size: 3em; color: green;
}

Новый параграф

пример:
Новый параграф

 д д д н д

E:first-line

p:first-line {
  color: green;
}

текст текст текст текст текст текст

пример:
текст текст текст
текст текст текст

 д д д д д

E::first-line

p::first-line {
  color: green;
}

текст текст текст текст текст текст

пример:
текст текст текст
текст текст текст

 д д д н д

E ~ F

h1 ~ p {
}
д д н д д

E:root

:root {
}
н д н н д

E:last-child

div:last-child {
}
н о н н н

E:only-child

div:only-child {
}
н о н н н

E:nth-child()

div:nth-child(2) {
}
н н н н н

E:nth-last-child()

div:nth-last-child(2) {
}
н н н н н

E:first-of-type

p:first-of-type {
}
н н н н о

E:last-of-type

p:last-of-type {
}
н н н н н

E:only-of-type

p:only-of-type {
}
н н н н н

E:nth-of-type()

p:nth-of-type(2) {
}
н н н н н

E:nth-last-of-type()

p:nth-last-of-type(2) {
}
н н н н н

E:empty

div:empty {
}


  
  
 
н о н н н

E:not()

div:not(.foo) {
}
н д н н д

E:target

E:target {
}

пример:
http://xxx.xx/xxx.html#foo

 н д н н д

E:enabled

input:enabled {
}
д д н н д

E:disabled

input:disabled {
}
д д н н д

E:checked

input:checked {
}
д д н н д

 

Расшифровка таблицы:

 д  — совместим
браузер понимает, что делать с этим селектором и правильно применяет описанные в нем свойства, такой селектор можно использовать;
 о  — совместим, но с ограничениями
браузер не всегда понимает, что делать с этим селектором и не всегда применяет описанные в нем свойства, такой селектор использовать можно, но не всегда;
 н  — не совместим
браузер не понимает, что делать с этим селектором и не применяет описанные в нем свойства, такой селектор лучше пока не использовать.

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

В этой таблице представлены Windows-браузеры (Opera 9.25, Firefox 2, Internet Explorer 6 и 7, Safari 3), а также отсутствуют некоторые селекторы.

CSS3-selectors.

 



Много комментариев (51) к “CSS-селекторы”

  1. anton :

    Версия для печати хромает.


    2007-01-21 at 12:40 am
  2. Баранов Андрей :

    угу, поправил, спасибо


    2007-01-21 at 2:50 pm
  3. MT :

    Насколько мне известно, и насколько это подтверждается практикой, IE7, как и, тем более, Fx2, селекторы E[attribute^=value], E[attribute$=value], E[attribute*=value] поддерживает.
    P. S. Дефис в заголовке статьи забыли.


    2007-01-21 at 10:10 pm
  4. DpakoH :

    А можно добавить еще ie 5, ie 5.5
    Люди еще пользуються этим Г :(


    2007-01-22 at 6:10 pm
  5. Баранов Андрей :

    MT, спасибо, поправил.


    2007-01-22 at 10:08 pm
  6. MT :

    Кстати, это же касается и Opera 9.1.
    ?, вероятно, имеет смысл сгруппировать все 7 селекторов атрибутов:

    E[attribute]
    E[attribute=value]
    E[attribute~=value]
    E[attribute|=value]
    E[attribute^=value]
    E[attribute$=value]
    E[attribute*=value]


    2007-01-23 at 6:56 pm
  7. pepelsbey :

    Если есть какие-то сомнения, можно проверить вживую.

    Opera последних билдов начала поддерживать много нового ;)


    2007-01-23 at 7:12 pm
  8. ^_^ :

    http://my.opera.com/dstorey/blog/show.dml/701902
    Upcoming CSS3 support in Opera

    http://css3.info/selectors-test/test.html
    Тест поддержки селекторов CSS3


    2007-01-24 at 11:46 pm
  9. Архангельский админ» Архив » Совместимость браузеров по CSS :

    [...] Браузеры – как люди, которые их создавали. По разному выглядят, по разному работают, по разному воспринимают и передают информацию. ? те же стремления одновременно быть, как все, нормальными и выделиться чем-то. Отличия в обработке CSS разными браузерами можно посмотреть в таблице совместимости браузеров с CSS-селекторами, псевдо-элементами и псевдо-классами. Таблица небольшая, в ней упомянуты только самые распространённые программы, но очень полезная для веб-разработчиков. [...]


    2007-01-27 at 12:01 am
  10. Ложкин :

    E:first-letter не работает в IE6
    смотрим тут.
    А вот если убрать доктайп – все становится нормально.
    Есть нормальный выход?


    2007-02-06 at 12:48 pm
  11. Тест CSS3-селекторов at Блог FX’а :

    [...] На hotibo.ru нашел сводную табличку по браузерам. Мой любимый FF2 впереди [...]


    2007-02-07 at 6:02 pm
  12. Chup :

    IE7 сцуко! Нихрена не сделали из заявленого! А такие речи на пресс-конференции были, на семинарах тоже… Тьфу!..


    2007-02-12 at 4:49 pm
  13. хакер :

    версия для печати и правда хромает


    2007-03-04 at 10:10 pm
  14. bigger :

    ну хромает и хрен с ней


    2007-04-04 at 3:32 pm
  15. Battle :

    hover’a нет


    2007-04-10 at 2:16 am
  16. Musicman :

    Блин IE ваще не рулит… Нахрен им стандарты ваще? :(


    2007-05-24 at 6:16 pm
  17. Архангельский Админ » Архив » Совместимость браузеров по CSS :

    [...] Браузеры – как люди, которые их создавали. По разному выглядят, по разному работают, по разному воспринимают и передают информацию. ? те же стремления одновременно быть, как все, нормальными и выделиться чем-то. Отличия в обработке CSS разными браузерами можно посмотреть в таблице совместимости браузеров с CSS-селекторами, псевдо-элементами и псевдо-классами. Таблица небольшая, в ней упомянуты только самые распространённые программы, но очень полезная для веб-разработчиков. [...]


    2007-08-24 at 12:04 am
  18. Таблица совместимости браузеров с CSS-свойствами » Wake Up! :

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


    2007-09-06 at 5:27 am
  19. Sam Dark :

    Для Opera 9.50 можно пометить всё зелёным.


    2007-09-06 at 1:50 pm
  20. webmaster :

    распечатать и повесить рядом с монитором


    2007-09-12 at 4:28 pm
  21. Light :

    >>Для Opera 9.50 можно пометить всё зелёным
    ?нтересно, откуда такая информация?

    >>Блин IE ваще не рулит… Нахрен им стандарты ваще? :(
    А кто говорит, что они смотрят на стандарты? Они делают свои и пытаются задавить своими нестандартными возможностями других. Хотя лично я бы не отказался, чтобы Opera и FF имели возможности подобные фильтрам (STYLE="filter...")

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


    2007-09-27 at 2:17 pm
  22. Life Style » » CSS селекторы :

    [...] Таблица совместимости браузеров с CSS-селекторами, псевдо-элементами и псевдо-классами. Прочитал что-то новое и полезное? Тогда подпишись [...]


    2007-10-27 at 8:31 pm
  23. Nikita :

    Уже столько об этом написано:
    http://quirksmode.org/css/contents.html
    http://dev.l-c-n.com/CSS3-selectors/browser-support.php

    А здесь есть тест браузера: http://css3.info/selectors-test/

    Ложкин, поставь пробел перез открывающей скобкой:

    div:first-child {
    ...
    }


    2008-01-08 at 5:02 pm
  24. Nikita :

    Т. е. так:

    E:first-letter {
    ...
    }


    2008-01-08 at 5:04 pm
  25. Alex :

    спс


    2008-01-27 at 11:56 am
  26. Prime :

    IE сакс


    2008-01-28 at 7:23 am
  27. Александр :

    Классно…


    2008-01-28 at 12:01 pm
  28. Octane :

    Недавно делал тему для wordpress и по неизвестным причина м ?Е6 (вин хп сп2) вдруг стал вылетать выдавая критическую ошибку, стоко всего перерыл, где только не искал ошибку, потом чото случайно удалил p:first-letter и ошибка исчезла Оо. Вылетало из за того что в параграф вставлялось (такая конструкция зяменяется в вордпрессе на ссылку "Читать дальше…"). Т.е. в параграфе первой буквой была первая буква ссылки. Повторить данный опыт в других условиях не удалось :D но теперь всегда, когда использую :first-letter записываю через "Child Selector" (http://css.maxdesign.com.au/selectutorial/selectors_child.htm):

    #article > p:first-letter {
    color: #c00;
    }

    Ну его нафиг этот ие6 :D пусть лучше не видят пользователи это визуальное форматирование, чем будут вылетать при загрузке страницы…


    2008-02-05 at 12:35 am
  29. Octane :

    Кстати на опера 9.50 beta (Build 9613) полностью поддерживает весь приведенный список селекторов и 100% проходит тест css3.info/selectors-test, так что для оперы 9.5 наверное стоит выделить отдельную колонку…


    2008-02-07 at 10:56 am
  30. ?горь Абакумов :

    Я её долго искал спасибо автор


    2008-02-13 at 3:00 am
  31. al777 :

    Статья то что надо мне понравилась, главное есть как применить.


    2008-02-13 at 2:53 pm
  32. Igor Dymow :

    Я до сих пор не вежаю полностью в ксс


    2008-02-20 at 11:34 pm
  33. Alex :

    Просьба автору: сделайте пометку, что таблица описывает отработку в документах xhtml, а не html. ?наче, вносится некоторая путаница, особенно касательно ie7.


    2008-02-21 at 5:15 pm
  34. Белов Михаил :

    алекс спасибо за уточнения а то я немог понять нечерта


    2008-03-11 at 6:04 pm
  35. человек :

    так наверно не смотрели расшифровку в конце таблицы!!!

    по-морему все понятно и ладно сделано, в любом случае, спасибо Вам за Ваш труд – он пригодится!


    2008-03-12 at 1:03 pm
  36. Владимир :

    Автору – спасибо за труд. Пригодилось.


    2008-03-14 at 7:21 pm
  37. Jack :

    9.50 beta 9815

    target работает


    2008-03-17 at 3:17 am
  38. btl :

    Спасибо за список, буду использовать.


    2008-03-18 at 4:49 pm
  39. SelenIT :

    WebKit-r31224 (ночная сборка от 22 марта), как и Опера 9.50, поддерживает все. Safari 3.1 Win у меня почему-то сказал, что не поддерживает :link и :visited, а остальное поддерживает (по этому тесту).


    2008-03-23 at 11:21 am
  40. Fedrus :

    Большое спасибо очень полезная таблица (как минимум для начинающих)!!!
    ? вообще сайт прикольный похоже я тут смогу получить много полезных знаний :O)


    2008-03-26 at 11:12 am
  41. eraser :

    Спасибо за табличку, очень помогла


    2008-04-01 at 9:59 pm
  42. homm :

    E > F
    div > div {
    }

    А почему внутренний div красный? ?МХО, зеленый.


    2008-04-04 at 8:19 am
  43. fantom ot f_1m :

    спасибо…пригодится имхо…


    2008-04-19 at 1:58 pm
  44. ProPelleR TTK :

    полезное… зачот


    2008-04-23 at 5:18 pm
  45. Casino :

    Спасибо, надо распечатать шпорку))


    2008-05-06 at 9:41 pm
  46. ontolog :

    Можно ли селекторы применить к тегу с префиксом пространства имен?
    Например, для тега такого вида: содержимое ?


    2008-05-11 at 9:18 pm
  47. ontolog :

    Пример тега не отображается…
    Повторю пример …
    содержимое

    Заранее спасибо ))


    2008-05-11 at 9:21 pm
  48. Мир CSS» Blog Archive » CSS-селекторы :

    [...] Подробнее [...]


    2008-06-04 at 3:25 pm
  49. Anticitizen1 :

    Мда… IE6 поддерживает class с ограничениями! Ужос!


    2008-06-05 at 2:03 am
  50. Олег :

    Вижу что ни один из браузеров не поддерживает всех возможностей CSS. Когда это прекратиться? Проще все на флэше делать. Везде все одинаково будет. Правда есть минут – весит он много.


    2008-06-25 at 10:40 pm
  51. ?горь :

    Действительно, а почему не упомянут E:hover? Я то знаю что он поддерживается всеми браузерами, но Вы его безосновательно обделили вниманием! =)

    Олег, а Flash – это своего рода молоток, я не согласе с утверждением, что дом можно построить одним лишь молотком! Во Flash много минусов!

    Anticitizen1, Internet Explorer для обеих платформ ДО версии IE7 не пооддерживает множественные классы! Без них вполне можно обойтись! :) Не так ли? =) Вы их вообще хоть раз использовали? Лично я бы их сторонился даже если бы они хорошо поддерживались…


    2008-08-13 at 1:24 pm