Not css selector: :not() — CSS | MDN

Leave a Comment / Css / By /

Псевдокласс отрицания :not(селектор) | CSS справочник

CSS селекторы

Значение и применение

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

Что нельзя использовать с псевдоклассом :not():

  • Использовать в одном селекторе несколько псевдоклассов :not().
  • Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).
  • Нельзя использовать с селекторами потомков (например, div ul a).
  • Использовать в групповых селекторах (комбинации из селекторов).

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

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
:not(селектор)4.03.59.63.29.012.0

CSS синтаксис:

:not(селектор) {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Давайте рассмотрим пример в котором по разному стилизуем изображения.

Допустим у нас есть изображения фиксированного размера со следующими значениями:

img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}

Создадим селектор класса .photo и применим его к необходимым изображениям, чтобы они получили оранжевую границу.

.photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}

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

img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}

Всё вместе и результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс отрицания :not()</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* ширина элемента в пикселях */
height: 100px; /* высота элемента в пикселях */
}
. photo { /* выбираем все элементы с классом photo */
border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */
}
img:not(.photo)  { /* выбираем все изображения, которые не имеют класса photo */
border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich" class = "photo">
		<img src = "nich.jpg" alt = "nich" class = "photo"><br>
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich"> 
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Как вы можете заметить на изображении ниже, мы справились с поставленной задачей и стилизовали с использованием псевдокласса отрицания :not() все изображения, отлично от изображений с классом photo:

Пример использования псевдокласса отрицания :not() в CSS.CSS селекторы

:not — CSS — Дока

Кратко

Секция статьи «Кратко»

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

Пример

Секция статьи «Пример»

Как вы наверняка уже знаете, между элементами принято задавать отступы так, чтобы у последнего или первого не было лишних отступов, чтобы они не торчали без дела и не меняли размеры родителя без причины.

Например, есть задача задать нижний отступ всем пунктам списка, кроме последнего:

Задаём нижние отступы всем пунктам списка:

li {  margin-bottom: 1em;}
          li {
  margin-bottom: 1em;
}

Сбрасываем нижний отступ у последнего пункта списка, чтобы не висел:

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

Для самого простого решения этой задачи нам потребовалось 2 блока кода. Но, скорее всего, в вашем проекте нужно будет сбросить лишние отступы не только для этого элемента. Точно можно как-то проще.

Конечно можно! Сократим два блока кода до одного, используя псевдокласс :not. Выберем все пункты списка, кроме последнего, и зададим им нижние отступы:

li:not(:last-child) {  margin-bottom: 1em;}
          li:not(:last-child) {
  margin-bottom: 1em;
}

Вуаля! Красиво, аккуратно, а главное, работает ровно как задумывалось 😏

Как пишется

Секция статьи «Как пишется»

Берём любой селектор, ставим двоеточие и пишем ключевое слово not. После него ставим круглые скобки и внутри них указываем селектор, который должен быть исключён из выборки. Селектор в скобках может быть любым, главное чтобы он не включал псевдоэлементы. В скобках можно указать и несколько селекторов, перечисленных через запятую. В таком случае будут исключаться элементы подходящие под любой из перечисленных селекторов.

Ещё можно выбирать внутри body любой элемент, не являющийся, например, абзацем: body :not(p). По аналогии можете выбирать любой элемент внутри определённого родителя, но не подходящий под условие.

Как понять

Секция статьи «Как понять»

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

А можно проще: мы командуем браузеру «Выбери все элементы подходящие к селектору до :not и исключи из выборки все элементы, подходящие под селектор в круглых скобках».

Подсказки

Секция статьи «Подсказки»

💡 Слева от :not необязательно должен быть селектор. Можно написать :not(

.hidden), и браузер выберет вообще все элементы на странице, кроме тех, у которых есть класс .hidden.

💡 Если очень захотеть — можно в космос полететь написать бесполезный селектор: :not(*). Такой селектор выберет любой элемент, который не является любым элементом 🤦‍♀️

💡 Нельзя вкладывать один :not в другой.

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

Красим в красный все пункты списка, кроме последнего элемента и кроме тех, у которых есть класс .active:

li:not(:last-child):not(.active) {  color: red;}
          li:not(:last-child):not(.active) {
  color: red;
}

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 После того, как поддержка этого псевдокласса была внедрена во все браузеры, я стала использовать его повсеместно. Гораздо удобнее написать один селектор, чем два блока кода для такой тривиальной задачи, как сброс последнего отступа или выбор элемента за исключением какого-то класса.

Из последнего: мне нужно было стилизовать все поля ввода, кроме тех, что были скрыты (иногда в форму добавляют скрытые поля, чтобы отправить вместе с данными пользователя служебные данные). Вместо того, чтобы писать составной селектор, выбирая отдельные поля или выдумывать отдельный класс только для тех полей, которые видны или не видны, я написала селектор input:not([hidden="true"]), и интерпретатор применил нужные мне стили только к тем инпутам, у которых нет атрибута hidden.

:нет | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство :not() в CSS является псевдоклассом отрицания и принимает в качестве аргумента простой селектор или список селекторов. Он соответствует элементу, который не представлен аргументом. Переданный аргумент не может содержать дополнительных селекторов или селекторов псевдоэлементов.

Возможность использовать список селекторов в качестве аргумента считается экспериментальной, хотя на момент написания этой статьи число поддерживаемых селекторов растет, включая Safari (с 2015 г. ), Firefox (с декабря 2020 г.) и Chrome (с января 2021 г.) .

 /* аргумент X можно заменить любым простым селектором */
: не (Х) {
  стоимость имущества;
}

В этом примере у нас есть неупорядоченный список с одним классом на

  • :

     
      
  
    • 
  
    • 
  
    •

    Наш CSS выберет все

  •  элементов , кроме  один(а) с классом .разные .

     /* Стиль всего, кроме класса . Different */
ли: не (.другой) {
  размер шрифта: 3em;
}

    Вы также можете сделать то же самое, используя псевдоклассы, которые считаются простыми селекторами.

     р: не (: n-й ребенок (2n + 1)) {
  размер шрифта: 3em;
}

    Однако, если мы используем селектор псевдоэлементов в качестве аргумента, это не даст ожидаемого результата.

     :not(::first-line) { /* ::first-line — это селектор псевдоэлементов, а не простой селектор */
  белый цвет;
}

    Сложные селекторы

    Они более новые, чем базовые селекторы :not() .

     /* выбрать все 
    , которые не являются потомками 
     */
р: не (статья *) {
}

    Это может немного сбить с толку, если немного увеличить вложенность. Например:

     h3:not(:where(статья *, раздел *)) {
  ...
}
/*
<статья>
   
     Нет совпадений! 
     

<раздел>
   
     Нет совпадений! 
     

<в сторону>
   
     Совпадение! 
     

*/

    Визуальный пример

    Визуальное представление различных вариантов использования :not()

    Специфичность

    Специфичность псевдокласса :not  — это специфика его аргумента. Псевдокласс :not()  не добавляет специфичности селектору, в отличие от других псевдоклассов.

    Отрицания не могут быть вложенными, поэтому :not(:not(...)) никогда не допускается. Авторы также должны учитывать, что, поскольку псевдоэлементы не считаются простыми селекторами, они недопустимы в качестве аргумента для :not(X) . Будьте внимательны при использовании селекторов атрибутов, поскольку некоторые из них не так широко поддерживаются, как другие. Цепочка :не селекторы с другими :не селекторы допустимы.

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

    Псевдокласс :not() был обновлен в спецификации CSS Selectors Level 4, чтобы разрешить список аргументов. В селекторах CSS уровня 3 он мог принимать только один простой селектор. В результате поддержка браузера немного разделена между черновиками Уровня 3 и Уровня 4.

    Простые селекторы
    IE Edge Firefox Chrome Safari Opera
    9+ All All All 12. 1+ All
    Android Chrome Android Firefox Браузер Android iOS Safari Opera Mobile
    Все Все Все Все80098
    Selector lists

    Desktop
    Chrome Firefox IE Edge Safari
    88 84 No 88 9

    Мобильный телефон/планшет
    Android Chrome Android Firefox Android iOS Safari
    107 106 107 9. 0-9.2

    Дополнительная информация

    • Selectors Modules Modul Альманах на 14 июля 2021 г.

      :является

      is(ul, ol) li { color: #f8a100; }

      :есть :где

      :куда

      main :where(h2, h3, h4) { color: #f8a100; }

      :где

      CSS: не селектор | SamanthaMing.com

      Вместо того, чтобы использовать 2 разных селектора для назначения стиля, а затем еще один для его отмены. Используйте селектор :not, чтобы выбрать все элементы, кроме тех, которые соответствуют аргументу, который вы передали0210

    • Передача списка селекторов
  • Вложенность Отрицания не разрешены 🙈
  • :first-child vs :first-of-type
    • Все дочерние элементы одного типа
    • Дочерние элементы разных типов
    • Другие похожие псевдоклассы CSS
  • Поддержка браузера
  • Вклад сообщества
  • Ресурсы

    • Допустимые аргументы

    В текущей версии CSS-селекторов уровня 3 в качестве аргумента можно передавать только простой селектор.

    Простые селекторы:

    • Селектор типа
    • Универсальный селектор
    • Селектор атрибутов
    • Селектор классов
    • . версии. CSS также имеют разные версии. Однако, в отличие от ECMAScript, где все находится в одной огромной категории (ES5, ES6, ES7), CSS работает фрагментарно.

      Например, у них есть CSS-селекторов уровня 3 , CSS Grid Layout уровня 1 и CSS Flexbox уровня 1 . Селектор :not подпадает под спецификацию CSS Selectors Level 3. Следующим, над которым работает рабочая группа CSS, является… подсказка, что будет после 3… ding ding, CSS Selectors Level 4 😜

      Рэйчел Эндрю написала фантастическую статью, объясняющую уровни CSS, я также дал ссылку на нее в Раздел ресурсов, так что прочитайте, если вам интересно 🤓

      Передача списка селекторов

      В текущей версии в качестве аргумента можно передавать только простые селекторы. Однако в селекторах CSS уровня 4 вы сможете передать список селекторов. Так здорово, правда 👏.

      И вот что будет выбрано

      Вложение Отрицание не разрешено 🙈

      Следует отметить, что отрицание может быть не вложенным. Итак, это нет-нет:

      :first-child vs :first-of-type

      Давайте начнем с их определения по отдельности:

      :first-child выбирает первый элемент, только если он является первым дочерним элементом своего родителя. Это означает, что если это не первый потомок родителя, ничего не будет выбрано.

      :first-of-type выберет первый элемент указанного вами типа. Даже если это не первый ребенок своего родителя. Таким образом, результат всегда будет отображаться, если вы используете этот селектор (если вы не выбрали элемент, который вообще не существует).

      Хорошо, давайте рассмотрим несколько примеров.

      Все дочерние типы одного типа

      Поскольку все дочерние типы одинаковы, результат будет одинаковым для обоих.

      Дети разных типов

      НО потому что р уже не первый ребенок. Если вы наберете p:first-child , НИЧЕГО не будет выбрано.

      Выбор первого дочернего элемента

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

      Другой аналогичный псевдокласс CSS

      И это понимание применимо к другим родственным классам:

      • :last-child и :last-of-type
      • :nth-child и и -of-type
      • :only-child и only-of-type

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

      Селектор :not

      поддерживается большинством современных браузеров и Internet Explorer 9 и выше.

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

      @hkfoster: Еще пара однострочников, которые также выполняют это:

      • li:nth-of-type(n + 2)
      • li ~ li
      9021: li + li {.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *