Not css: Псевдокласс :not | htmlbook.ru

: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.

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

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

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

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

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

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

CSS синтаксис:

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

Версия CSS

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

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

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:

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

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

• Все дети одного типа
• Дети являются разными типами
• Выбор First Child
• Другие аналогичные CSS Pseudo-Class

разрешенные аргументы

В текущем проекте, выборы CSS. может передавать только простой селектор в качестве вашего аргумента.

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

• Селектор типов
• Универсальный селектор
• Селектор атрибутов
• Селектор класса
• Селектор ID
• Псевдо-класс

Кратко об управлении версиями CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дети разные

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

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

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

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

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

• :last-child и :last-of-type
• : NTH-Child и : Nth-Ofty
• : только деть и только из типа

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

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

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

@vels_io: li + li {...}

@andr3: Это мощный инструмент, и, как и все, его нужно использовать ответственно. Например, вы можете обойтись простым:

Resources

• MDN Web Docs — CSS :not
• w3schools — CSS :not
• W3C — CSS :not
• CSS Tricks — CSS :not
• caniuse — CSS :not
• Почему нет CSS4 — объяснение уровней CSS
• w3schools — CSS :first-child
• w3schools — CSS :first-of-type

Псевдоклассы CSS: :not() и :target — SitePoint

HTML & CSS

CSS

902 2017

Поделиться

Ниже приводится выдержка из нашей книги «Мастер CSS», написанной Тиффани Б. Браун. Копии продаются в магазинах по всему миру, или вы можете купить ее в виде электронной книги здесь.

Как упоминалось ранее в этой главе, псевдоклассы помогают нам определять стили для документов на основе информации, которую невозможно извлечь из дерева документа или на которую нельзя ориентироваться с помощью простых селекторов CSS. К ним относятся логические и лингвистические псевдоклассы, такие как :not() и :lang() . Он также включает запускаемые пользователем псевдоклассы, такие как :hover и :focus .

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

Выделение фрагментов страницы с помощью

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

 <раздел>
 
Комментарии к этому сообщению
 
<статья>...
<статья>...
<статья>...
 

С некоторыми CSS и другими модными элементами это выглядит немного похоже на то, что вы видите на рисунке ниже.

Каждый комментарий в вышеупомянутом коде имеет идентификатор фрагмента, что означает, что мы можем напрямую ссылаться на него. Например,

 .comment:target {
  фон: #ffeb3b;
  цвет границы: #ffc107
} 

 

<дел>
Вкладка 1
Вкладка 2
Вкладка 3

<ул>

Это вкладка 1.


Это вкладка 2


Это вкладка 3.


 

Вот где происходит волшебство. Во-первых, мы полностью расположили все наши вкладки. Затем мы сделали нашу первую вкладку самым верхним слоем, добавив z-index: 1 . Это важно только в том случае, если вы хотите, чтобы первая вкладка в исходном порядке была первой вкладкой, которую видят пользователи. Наконец, мы добавили z-index: 1 на нашу целевую вкладку. Это гарантирует, что целевой слой всегда будет самым верхним. Вы можете увидеть результат ниже.

Совет. Повышение доступности

Более доступная версия может также использовать JavaScript для переключения атрибутов hidden или aria-hidden=true в зависимости от видимости тела каждой вкладки.

При нажатии на вкладку URL-адрес обновляется новым идентификатором фрагмента документа. Это, в свою очередь, вызывает состояние :target .

Отрицание селекторов с помощью

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

Псевдокласс :not() известен как функциональный псевдокласс . Он принимает один аргумент, как это делают функции в других языках программирования. Любой аргумент, переданный в :not() , должен быть простым селектором, таким как тип элемента, имя класса, идентификатор или другой псевдокласс. Псевдоэлементы потерпят неудачу, как и составные селекторы, такие как label.checkbox или сложные селекторы, такие как p img .

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

 

   
Присоединяйтесь к классному детскому клубу
 
  <р>
 Имя:

  

 
  <р>
Электронная почта:

  

  <набор полей>
Получить дайджест?
<р>

Ежедневно

Еженедельно

  
  Купить билеты!
 

В HTML метки, связанные с типом radio , имеют класс . label-radio . Мы можем использовать псевдокласс :not() : для нацеливания на эти элементы без класса label-radio , как показано на рисунке ниже:

 label:not(.label-radio) {
  вес шрифта: полужирный;
  дисплей:блок;
} 

Вот пример посложнее. Давайте создадим стили для текстового ввода. К ним относятся типы ввода, такие как

 ([type=radio]),
ввод: не ([тип = флажок]),
ввод: не ([тип = диапазон]) {
  ...
} 

К сожалению, это не сработает, так как каждый селектор переопределяет предыдущий. Это эквивалент ввода:

 input:not([type=radio]){ ... }
ввод: не ([тип = флажок]) { ... }
ввод: не ([тип = диапазон]) {... } 

Вместо этого нам нужно связать наши псевдоклассы :not() , чтобы все они фильтровали элемент input : ^[4]

 input:not([type=radio]):not( [тип = флажок]): не ([тип = диапазон]) {
. ..
} 

Использование псевдоклассов (и псевдоэлементов) без простого селектора эквивалентно использованию его с универсальным селектором. Другими словами, :not([type=radio]) совпадает с *:not([type=radio]) . В этом случае каждый элемент, которому не хватает 9Атрибут 0067 type и значение radio будут совпадать, включая html и body . Чтобы предотвратить это, используйте :not() с селектором, таким как имя класса, идентификатор или селектор атрибута. Кстати, это также верно для селекторов имени класса, идентификатора и атрибута: .warning и [type=radio] совпадают с *.warning и *[type=radio] .

CSS-селекторы уровня 4 уточняют способ :not() работает, так что в качестве аргумента может принимать список, а не только простые селекторы. Вместо объединения псевдоклассов, как раньше, мы сможем использовать аргумент, разделенный запятыми:

 input:not([type=radio], [type=checkbox], [type=range]) {
.