Псевдокласс :not() применяет стиль к элементам, которые не содержат указанный селектор.
Этот псевдокласс также называется negation.
Версия
CSS3
Синтаксис
:not() {
css declarations;
}Пример
<!doctype html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p {
color: #666;
}
:not(p) {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:not() selector example</h2>
<p>Lorem Ipsum - это текст-"рыба"</p>
<p>Lorem Ipsum - это текст-"рыба"</p>
<div>Lorem Ipsum - это текст-"рыба"</div>
<a href="https://www.w3docs.com" target="_blank">Link to W3docs</a>
</body>
</html>Рассмотрим другой пример:
Пример
<!doctype html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.text-blue{color:blue;}
ul li:not(.text-blue) {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>Пример селектора :not()</h2>
<ul>
<li>Элемент списка 1</li>
<li class="text-blue">Элемент списка 2</li>
<li>Элемент списка 3</li>
</ul>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 4.0+ | 12.0+ | 3.5+ | 3.2+ | 10.0+ |
Практикуйте свои знания
Какой CSS псевдокласс применяет стиль к элементам, которые не содержат указанный селектор?
Правильный!
Неправильно!