Псевдокласс отрицания :not
Псевдокласс CSS отрицания, :not(X)
, является функциональной нотацией, принимающей простой селектор X в качестве аргумента.Он соответствует элементу, который не представлен аргументом.X не должен содержать другой селектор отрицания.
Вы можете использовать :not
, чтобы исключить любое подмножество сопоставленных элементов, упорядоченных так же, как обычные селекторы CSS.: исключая по классу
div:not(.class)
Выберет все div
элементов без класса .class
div:not(.class) {
color: red;
}
<div>Make me red!</div>
<div class="class">...but not me...</div>
Сложный пример: исключая по типу / иерархии
:not(div) > div
Выберет все div
элементы, которые не являются потомками другого div
div {
color: black
}
:not(div) > div {
color: red;
}
<div>Make me red!</div>
<div>
<div>...but not me...</div>
</div>
Сложный пример: цепочка псевдоселекторов
С заметным исключением невозможности цепочки / гнезда :not
селекторов ипсевдоэлементы, которые вы можете использовать вместе с другими псевдо селекторами.
div {
color: black
}
:not(:nth-child(2)){
color: red;
}
<div>
<div>Make me red!</div>
<div>...but not me...</div>
</div>
:not
является CSS3Селектор уровня , главное исключение с точки зрения поддержки состоит в том, что он IE9 +
Спецификация также делает интересный момент:
псевдо :not()
позволяет писать бесполезные селекторы.Например, :not(*|*)
, который вообще не представляет элемента, или foo:not(bar)
, что эквивалентно foo
, но с более высокой специфичностью.