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.