CSS-селекторы

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

  OP9 FF2 IE6 IE7

*

* {
}
 д д д д

 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-браузеры, а также отсутствуют некоторые селекторы.

CSS3-selectors.

 

Много комментариев (22) к “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
Оставить комментарий



XHTML: Вы можете использовать следующие теги:

* не забудьте ввести символы, показанные на картинке

* - поле должно быть заполнено.

33 queries 1.322 seconds.