CSS псевдокласс :not()

Псевдокласс :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>

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Практикуйте свои знания

Какой CSS псевдокласс применяет стиль к элементам, которые не содержат указанный селектор?
Считаете ли это полезным?