Руководство по CSS

CSS @правила (RULES)

Полный список свойств CSS

Функции CSS Полное руководство по селекторам CSS

CSS3 :not селектор

CSS pseudokласс :not() используется для выбора элементов, которые не соответствуют группе селекторов. Поскольку его目的是 предотвратить выбор определенных элементов, он также известен как негативный pseudokласс (negation pseudo-class).

Полное руководство по CSS-селекторам

Внимание:

:not() пseudokлассы не могут быть вложены, что означает :not(:not(...)) это недопустимо.
Поскольку псевдоэлементы не являются простыми селекторами, их нельзя использовать как :not() имеет форму}} 参数中的:not(p::before) Этот селектор не будет работать.
Этот псевдокласс можно использовать для создания выбора, который никогда не будет использоваться. Например: :not(*) соответствуют любому неэлементному элементу, поэтому это правило никогда не будет применено.
Этот псевдокласс можно использовать для повышения приоритета правил. Например: #foo:not(#bar) и #foo будут соответствовать тем же элементам, но у первого приоритет выше.
:not(.foo) соответствуют любому не .foo элементывключая <html> и <body>.
Этот селектор применяется только к одному элементу, и с его помощью нельзя исключить всех родительских элементов. Например: body :not(table) a все еще будет применяться к элементам таблицы <table> внутренний <a> , потому что <tr>Будет применен :not(table) Эта часть выборщика соответствует.

Онлайн пример

Установить фоновый цвет для каждого элемента, кроме <p>:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Базовое руководство (oldtoolbag.com)</title>
<style>
p {
　　　　color: #000000;
}
:not(p) {
　　　　color: #ff0000;
}
</style>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это абзац.</p>
<p>Это еще один абзац.</p>
<div>Это текст в элементе div.</div>
<a href="//ru.oldtoolbag.com/" target="_blank">Перейти к базовому руководству</a>
</body>
</html>

Проверьте, ‹/›

Определение и использование

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

Совместимость браузеров

Числа в таблице указывают на версию первого браузера, поддерживающего этот выборщик.

Выборщик
:not()	4.0	9.0	3.5	3.2	9.6

Полное руководство по CSS-селекторам

Функции CSS Полное руководство по селекторам CSS