CSS-селекторы

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

  OP9 FF2 IE6 IE7 Saf3
win

*

* {
}
д д д д д

 E

div {
}

<div>
  <div></div>
</div>
д д д д д

E F

div p {
}

<div>
  <p></p>
</div>
<p></p>
д д д д д

E > F

div > div {
}

<div>
  <div>
    <div></div>
  </div>
</div>
д д н д д

E:first-child

div:first-child {
}

<div>
  <div></div>
  <div></div>
</div>
о о н о о

E:link

a:link {
}

<a href="x.html">
 страница x.html еще не посещалась
</a>
<a href="y.html">
 страница y.html уже посещалась
</a>
д д д д д

E:visited

a:visited {
}

<a href="x.html">
 страница x.html еще не посещалась
</a>
<a href="y.html">
 страница y.html уже посещалась
</a>
д д д д д

E:lang(c)

:lang(ru) {
}

<div lang="ru"></div>
<div lang="en"></div>
д д н н о

E + F

h1 + p {
}

<h1></h1>
<p></p>
<p></p>
д д н д д

E[attribute]

td[align] {
}

<td align="right"></td>
<td width="100"></td>
д д н о д

E[attribute=value]

td[align=left] {
}

<td align="left"></td>
<td align="right"></td>
д д н д о

E[attribute~=value]

a[rel~=new] {
}

<a href="#" rel="new"></a>
<a href="#" rel="link new"></a>
<a href="#" rel="newlink"></a>
д д н д о

E[attribute|=value]

div[lang|=en] {
}

<div lang="en-us"></div>
<div lang="us-en"></div>
д д н д о

E[attribute^=value]

td[class^=left] {
}

<td class="lefttop"></td>
<td class="topleft"></td>
<td class="left-top"></td>
<td class="top-left"></td>
д д н д о

E[attribute$=value]

td[class$=left] {
}

<td class="topleft"></td>
<td class="lefttop"></td>
<td class="top-left"></td>
<td class="left-top"></td>
д д н д о

E[attribute*=value]

td[class*=left] {
}

<td class="left"></td>
<td class="lefttop"></td>
<td class="topleft"></td>
<td class="letopft"></td>
д д н д о

E.class

div.first {
}

<div class="first"></div>
<div class="first second"></div>
<div class="second"></div>
<p class="first"></p>
д д о д д

E#id

#first {
}

<div id="first"></div>
<div></div>
д д д д д

E:before

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

<p>параграф</p>

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

д д н н д

E::before

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

<p>параграф</p>

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

д д н н д

E:after

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

<p>Новый</p>

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

д д н н д

E::after

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

<p>Новый</p>

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

д д н н д

E:first-letter

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

<p>Новый параграф</p>

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

д д д д д

E::first-letter

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

<p>Новый параграф</p>

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

д д д н д

E:first-line

p:first-line {
  color: green;
}

<p>текст текст текст текст текст текст</p>

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

д д д д д

E::first-line

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

<p>текст текст текст текст текст текст</p>

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

д д д н д

E ~ F

h1 ~ p {
}

<p></p>
<h1></h1>
<p></p>
д д н д д

E:root

:root {
}

<html>
  <body>
  </body>
</html>
н д н н д

E:last-child

div:last-child {
}

<div>
  <div></div>
  <div></div>
</div>
н о н н н

E:only-child

div:only-child {
}

<div>
  <div></div>
</div>
н о н н н

E:nth-child()

div:nth-child(2) {
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
н н н н н

E:nth-last-child()

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

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
н н н н н

E:first-of-type

p:first-of-type {
}

<p></p>
<div>
  <div></div>
  <p></p>
  <p></p>
</div>
<p></p>
н н н н о

E:last-of-type

p:last-of-type {
}

<p></p>
<div>
  <div></div>
  <p></p>
  <p></p>
</div>
<p></p>
н н н н н

E:only-of-type

p:only-of-type {
}

<p></p>
<div>
  <h1></h1>
  <p></p>
  <div></div>
</div>
<p></p>
н н н н н

E:nth-of-type()

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

<div>
  <h1></h1>
  <p></p>
  <p></p>
  <div></div>
  <p></p>
</div>
н н н н н

E:nth-last-of-type()

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

<div>
  <h1></h1>
  <p></p>
  <p></p>
  <div></div>
  <p></p>
</div>
н н н н н

E:empty

div:empty {
}

<div>
  <div></div>
  <div> </div>
  <div><!-- комментарий --></div>
</div>
н о н н н

E:not()

div:not(.foo) {
}

  <div id="foo"></div>
  <div class="foo"></div>
н д н н д

E:target

E:target {
}

<p id="foo"></p>
<p id="notfoo"></p>

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

н д н н д

E:enabled

input:enabled {
}

  <input type="text" />
  <input type="text" disabled="disabled" />
д д н н д

E:disabled

input:disabled {
}

  <input type="text" />
  <input type="text" disabled="disabled" />
д д н н д

E:checked

input:checked {
}

  <input type="checkbox" />
  <input type="checkbox" checked="checked" />
д д н н д

 

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

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

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

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

CSS3-selectors.

 



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

  1. anton :

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


  2. Баранов Андрей :

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


  3. MT :

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


  4. DpakoH :

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


  5. Баранов Андрей :

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


  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]


  7. pepelsbey :

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

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


  8. ^_^ :

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

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


  9. Архангельский админ» Архив » Совместимость браузеров по CSS :

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


  10. Ложкин :

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


  11. Тест CSS3-селекторов at Блог FX’а :

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


  12. Chup :

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


  13. хакер :

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


  14. bigger :

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


  15. Battle :

    hover’a нет


  16. Musicman :

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


  17. Архангельский Админ » Архив » Совместимость браузеров по CSS :

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


  18. Таблица совместимости браузеров с CSS-свойствами » Wake Up! :

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


  19. Sam Dark :

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


  20. webmaster :

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


  21. Light :

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

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

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


  22. Life Style » » CSS селекторы :

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


  23. Nikita :

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

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

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

    div:first-child {
    ...
    }


  24. Nikita :

    Т. е. так:

    E:first-letter {
    ...
    }


  25. Alex :

    спс


  26. Prime :

    IE сакс


  27. Александр :

    Классно…


  28. Octane :

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

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

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


  29. Octane :

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


  30. Игорь Абакумов :

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


  31. al777 :

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


  32. Igor Dymow :

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


  33. Alex :

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


  34. Белов Михаил :

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


  35. человек :

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

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


  36. Владимир :

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


  37. Jack :

    9.50 beta 9815

    target работает


  38. btl :

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


  39. SelenIT :

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


  40. Fedrus :

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


  41. eraser :

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


  42. homm :

    E > F
    div > div {
    }

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


  43. fantom ot f_1m :

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


  44. ProPelleR TTK :

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


  45. Casino :

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


  46. ontolog :

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


  47. ontolog :

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

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


  48. Мир CSS» Blog Archive » CSS-селекторы :

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


  49. Anticitizen1 :

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


  50. Олег :

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


  51. Игорь :

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

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

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



22 queries 0.321 seconds.