Псевдо-класс :not() в CSS3

В Сети содержится не так уж и много информации об этом новом псевдо-классе в CSS3: даже официальная спецификация занимает всего три строчки и не содержит ни единого примера. В принципе, так оно и должно быть, так как суть данного псевдо-класса проста: выбирать все элементы, которые не имеют простого селектора, принятого :not() в качестве аргумента. Простыми селекторами могут быть:

1. одиночные элементы (скажем, body);
2. селекторы атрибутов (пусть будет [value*="foo"]);
3. классы (например, .foo);
4. идентификаторы (#foo);
5. псевдо-классы (:hover).

Я думаю, вас не удивит то, что этот новенький псевдо-класс не работает в IE? Пробежимся по примерам.

Примеры

div:not(.home) {…}

Выбираются все div-элементы, не содержащие класс .home.

div *:not(p) em {…}

Выбираются все элементы em, но только те, которые не содержатся внутри элементов p. Скажем, <div><strong><em>…</em></strong></div> будет соответствовать, а <div><p><em>…</em></p></div> - нет.

input:not([type="file"]) {…}

Тут мы использовали селектор атрибута в качестве аргумента: будут выбраны все input-элементы, которые не отвечают за загрузку файлов на сервер.

h2:not(.foo, .bar) {…}

Тоже будет работать: выберутся все заголовки второго уровня, которые не соответствуют классам .foo и .bar. А в спецификации не указано, что поддерживаются множественные аргументы. Вот и думай теперь...

:not() можно использовать и как составную часть какого-нибудь длинного селектора. Ну, например, вот такого:

li:not(.pingback) .comment-content p:first-child:first-line {…}
body:not(.home) h2 + p:first-letter {…}
.post:not(.first-post) a:hover {…}

Чтож, по-моему, псевдо-класс :not() - это замечательное дополнение в CSS, которое может успешно сочетаться с принципом «graceful degradation». А на этой страничке вы можете посмотреть (если вы сидите на Chrome, Firefox или Safari) демонстрации всех перечисленных примеров.