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

Псевдокласс :not() – это CSS-селектор, который позволяет вам выбрать все элементы, которые не соответствуют определенному селектору, который вы передаете в качестве аргумента в псевдокласс.

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

/* Без псевдокласса :not() */
li {
    margin-bottom: 12px;
}

li:last-child {
    margin-bottom: 0;
}

/* C использованием псевдокласса :not() */
li:not(:last-child) {
    margin-bottom: 12px;
}

Или например надо выбрать все ссылки у которых нет класса, чтобы не пришлось переопределять стили для ссылок с классами:

a:not([class]) {
    color: red;
}

Также псевдокласс :not()можно использовать в случае, когда изначально надо скрыть блок, а при добавлении класса .active показывать его:

/* Без псевдокласса :not() */
.block {
  display: none;
}

.block.active {
  display: block;
}

/* C использованием псевдокласса :not() */
.block:not(.active) {
  display: none
}

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

div:not(:last-child):not(:first-child) {
  /* стили */ 
}