Прелести CSS 3: псевдо-класс :not(). Блог для вебмастеров

Веб дизайн, CSS, SEO, юзабилити. Уроки веб-мастерства

Прелести CSS 3: псевдо-класс :not()

26 Август 2008 просмотров 5 897 комментариев 16

С момента публикации спецификации СSS 3 прошло почти 3 года, но вебмастера так и не могут воспользоваться всеми преимуществами нового стандарта. Перетирать причины и искать виновников – дело бесполезное т.к. все равно ничего с места не сдвинется. Можно лишь сказать спасибо разработчикам FireFox и Safari, за возможность “пощупать” новые свойства CSS 3.

Мне хочется рассказать об одном из таких замечательных нововведений CSS 3, а именно: о псевдо-классе :not(). В спецификации нем написано всего пару строк, но польза его очень велика.

The negation pseudo-class, :not(X), is a functional notation taking a simple selector […] as an argument. It represents an element that is not represented by the argument.

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

Как защитить свой сайт от мошенников? Актуальная статья о протоколах безопасной передачи данных в Интернет.

Рок за свободу: концерт, посвященный событиям августа 1991 года. Чувства, о которых можно рассказать только музыкой.

Нужна квартира в кредит? Выясните все вопросы об ипотеке и условиях кредита на жилье.

А вы когда-нибудь пробовали настоящую итальянскую пиццу? Все рецепты итальянской кухни теперь на сайте www.italian-kitchen.org.

Настоящая баня с березовым веником… Лучший отдых от насущных проблем и забот.

Например, в качестве аргумента могут быть селекторы:

div
*
[value="somevalue"]
.someclass
#someid
:hover

Примеры использования

div:not(.home) {…}

Данная запись означает, что свойства записанные в фигурных скобках, будут применены ко всем элементам div, кроме элемента, имеющего класс .home. К сожалению, в качестве аргументов not(), использовать потомки селекторов нельзя.

Используя приведенный ниже код, можно написать стили для всех элементов p в блоке div, кроме первого, т.е. кроме первого абзаца текста.

div:not(p::first-line) {…}

И так далее.. Примеров можно привести множество, а вот увидеть их в действии можно только в браузерах Opera, Safari и FireFox.

IE такие высоты пока не покорил и очень жаль, т.к. этот псевдо-класс решил бы множество задач в процессе верстки..

Комментариев 16 »

]]>Денис Судилковский пишет: ]]>

Отлично! Осталось только подождать, пока Гугл купит Майкрософт, и ИЕ будет поддерживать современные технологии (:

Денис СудилковскийЦитировать

# 27 Август 2008 at 1:58
]]>webmasters_by пишет: ]]>

я извиняюсь, но что то у меня этот :not() не работает ни в одном браузере

webmasters_byЦитировать

# 27 Август 2008 at 15:05
]]>Автор пишет: ]]>

Проверьте браузер этим тестом на поддержку селекторов и псевдо-классов http://www.css3.info/selectors-test/test.html

АвторЦитировать

# 27 Август 2008 at 16:21
]]>webmasters_by пишет: ]]>
Да проверял я этим тестом, выдает что все поддерживает, но если взять Ваш пример: div:not(p) em {…} и задать цвет текста, например, красный, то он не будет применяться ни к каким em
```
<p><em>…</em></p> /* ни к этим */
<em>…</em> /* ни к этим */
```
```
Проверял в FF 3.1 и Opera 9.5
```
webmasters_byЦитировать
# 28 Август 2008 at 13:43
]]>Автор пишет: ]]>
Странно, этот пример действительно не работает, а вот этот работает:
```
div:not(.home) {…}
```
АвторЦитировать
# 28 Август 2008 at 14:06
]]>Антон пишет: ]]>

А у меня все сработало, автору спасибо!

АнтонЦитировать

# 28 Август 2008 at 14:51
]]>olyabolebok пишет: ]]>

У меня почему-то not не работает,поробую исспользовать Ваши советы.

olyabolebokЦитировать

# 29 Август 2008 at 12:02
]]>boberov пишет: ]]>

Аналогичная проблема – не хотить работать. Вроде делаю все верно. Попробую другим способом.

boberovЦитировать

# 29 Август 2008 at 13:37
]]>Мир CSS» Blog Archive » Еще немного о CSS3 пишет: ]]>

# 9 Октябрь 2008 at 19:28
]]>Recent Faves Tagged With "css3" : MyNetFaves пишет: ]]>

# 27 Октябрь 2008 at 22:35
]]>Интересное для веб-мастеров (31.10.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с пишет: ]]>

# 31 Октябрь 2008 at 20:30
]]>андрей пишет: ]]>

div:not(p) em {…}
Это что должно получиться? div, который не является p? Конечно оно работать не будет так, как вы ожидаете.А то что ожидаете можно получить двумя правилами:
div em {…} и div p em {…}
Ну или используя селектор > (помня, что работает он не везде), если em будет вложен непосредственно в div
div>em {…}

андрейЦитировать

# 1 Ноябрь 2008 at 11:58
]]>Автор пишет: ]]>
div:not(p) em {…} – это :
это не div, который не является p,
это div, в котором em идет НЕ ВНУТРИ p
```
<div><em>…</em></div> /* описанные стили будут работать */
<div><p><em>…</em></p></div> /* описанные стили НЕ будут работать */
```
АвторЦитировать
# 1 Ноябрь 2008 at 17:45
]]>андрей пишет: ]]>

Ваш пример неверен! В этом правиле ошибка!
http://www.w3.org/TR/css3-selectors/#negation
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself and pseudo-elements) as an argument. It represents an element that is not represented by the argument.
В not должен идти простой селектор, «относящийся» к главному селектору. Указывать потомков в качестве аргумента нельзя. Кстати, в jQuery not работает точно так же.

андрейЦитировать

# 5 Ноябрь 2008 at 12:58
]]>Автор пишет: ]]>

Я уже исправила в статье, спасибо.

АвторЦитировать

# 5 Ноябрь 2008 at 16:31
]]>дизайнер пишет: ]]>

Можно лишь сказать спасибо разработчикам FireFox и Safari, за возможность «пощупать» новые свойства CSS 3.
Почему-то Опера совсем забыта, а ведь она раньше FireFox’a прошла все тесты селекторов css3.

дизайнерЦитировать

# 30 Август 2009 at 19:48