CSS-селектор :not - что это, и как использовать на практике

CSS-селектор :not — это псевдокласс, который позволяет выбрать все элементы, кроме тех, которые соответствуют указанному условию. Это полезный инструмент для стилизации веб-страниц, так как он позволяет исключить определенные элементы из общего правила.

Синтаксис селектора :not выглядит так:

:not(селектор) {
   свойство: значение;
}

Здесь селектор — это любой допустимый CSS-селектор, который определяет элементы, которые нужно исключить из выборки. Свойство и значение — это стили, которые будут применяться к остальным элементам.

Примеры использования селектора :not на практике

1. Выбрать все ссылки, кроме тех, которые имеют атрибут href:

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

2. Выбрать все параграфы, кроме тех, которые имеют класс intro:

p:not(.intro) {
    font-size: 18px;
}

3. Выбрать все элементы, кроме тех, которые являются потомками элемента с id container:

*:not(#container *) {
    border: 1px solid black;
}

4. Изменение внешнего вида всех элементов, кроме наведенного.

ul:hover li:not(:hover) { 
   opacity:0.5; 
}

5. Меню с разделителями между элементами

.menu-item:not(:last-child):after {
   content: ' | '; 
}

6. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

/* подсвечиваем теги без необходимых атрибутов */
img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}

/* тревога, если первый child внутри списка не li и прочие похожие примеры */
ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

7. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    /* стили для текстовых полей ввода */
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  /* стили для текстовых полей ввода */
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  /* стили для текстовых полей ввода */
}

8. Исключить элементы с определенным классом: *:not(.class).

9. Исключить элементы с определенным идентификатором: *:not(#id).

10. Исключить первый элемент: *:not(:first-child).

11. Исключить последний элемент: *:not(:last-child).

12. Исключить первый элемент определенного типа: *:not(:first-of-type).

13. Исключить последний элемент определенного типа: *:not(:last-of-type).

14. Исключить элементы, которые находятся в определенном контейнере: *:not(parent > child).

15. Исключить элементы, которые находятся в определенном контейнере, но не являются дочерними элементами: *:not(parent child).

16. Исключить элементы, которые находятся в определенном контейнере, но не являются непосредственными дочерними элементами: *:not(parent > *:not(child)).

17. Исключить элементы, которые находятся в определенном контейнере, но не являются дочерними элементами определенного типа: *:not(parent > child-of-type).

Если вы хотите узнать больше о том, как использовать селектор :not на практике, я рекомендую посетить следующие ресурсы:

CSS-селекторы — CSS: каскадные таблицы стилей | MDN — это подробный ресурс, который описывает различные типы CSS-селекторов, включая :not.
CSS-селектор :not. Полезные примеры — это статья, которая содержит несколько полезных примеров использования селектора :not.
Селекторы CSS — Изучение веб-разработки | MDN — это руководство по использованию различных типов CSS-селекторов, включая :not.

Надеюсь, это поможет вам лучше понять, как использовать селектор :not в CSS! Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать.