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

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

CSS-селекторы (CSS2.1, CSS3) - таблица совместимости

» » Сообщение:

Таблица совместимости браузеров с 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©


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

css-селекторы, css2.1, css3, таблица совместимости, браузер, css-селектор, псевдо-элемент, псевдо-класс



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0321Мини тренинг скорочтения. Таблица Ш...
Сообщение от: Admin
0652Таблица соответствий размеров шрифт...
Сообщение от: Admin
04630API uCoz - Таблица соответствия пол...
Сообщение от: Admin
0733Что тебе надо? Полезная таблица
Сообщение от: Admin
03056Дженнифер Нидерст Роббинс. HTML5, C...
Сообщение от: Admin