Not css: 🤷🏽‍♀️ Page not found | MDN Web Docs

Содержание

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

CSS селекторы

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

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

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

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

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

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 | WebReference

Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис 

Селектор:not(<Селектор>) { ... }

В качестве селектора могут указываться единичные псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(…)) запрещена) и псевдоэлементы.

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>not</title>
<style>
input:not([type=»submit»]) {
border: 1px solid #ccc;
padding: 3px;
}
</style>
</head>
<body>
<form action=»handler.php»>
<p>Ваше имя: <input name=»user»></p>
<p>Прилагаемый файл: <input type=»file» name=»file»></p>
<p><input type=»submit» value=»Отправить»></p>
</form>
</body>
</html>

В данном примере стиль применяется ко всем элементам <input> за исключением того, в параметрах которого установлено type=»submit» (кнопка «Отправить»). Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :not

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.08.2017

Редакторы: Влад Мержевич

CSS псевдокласс отрицания: not() для родительских/предковых элементов

Это сводит меня с ума:

HTML:

<div><h2>Hello World!</h2></div>

CSS:

*:not(div) h2 { color: #900; }

Разве это не гласит: «выберите все элементы h2 , у которых есть предок, который не является элементом div …?» таким образом, «Hello World!» не должен быть окрашен в красный цвет, но он все еще есть.

Для вышеприведенного markup добавление дочернего комбинатора работает:

*:not(div) > h2 { color: #900; }

Но не влияет на элемент h2 , если он не является дочерним элементом элемента div . Например:

<div><article><h2>Hello World!</h2></article></div>

Вот почему я хотел бы указать элемент h2 как потомок, а не как потомок элемента div . Кто-нибудь?

html

css

css-selectors

Поделиться

Источник


charles    

16 августа 2011 в 19:49

2 ответа

  • CSS псевдокласс отрицания не работает

    Я слишком многого прошу от этого псевдо-отрицания. У меня есть такая структура HTML: <div> <div class=item></div> <div class=item></div> <div class=item></div> <div class=item></div> <div class=item></div> </div> В CSS, у…

  • CSS общий сиблинг-комбинатор (~) не работает с псевдоклассом отрицания (: not)

    У меня есть список контактов, который генерируется как неупорядоченный список с атрибутами HTML5 data , назначенными каждому элементу списка. Значения атрибутов data являются одиночными буквами для целей алфавитизации. Я не могу контролировать markup, который генерируется, но мне нужно вставить…


88

Разве это не означает: «Выберите все элементы h2 , у которых есть предок, который не является элементом div …?»

Оно делает. Но в типичном документе HTML у каждого h2 есть по крайней мере два предка, которые не являются элементами div , и эти предки не что иное, как body и html .

Это проблема с попыткой фильтровать предков с помощью :not() : она просто не работает надежно, особенно когда :not() не квалифицируется каким-либо другим селектором, таким как селектор типов или селектор классов, например .foo:not(div) . Вам будет гораздо проще просто применить стили ко всем элементам h2 и переопределить их с помощью div h2 .

В селекторах 4 :not() был расширен , чтобы принимать полные комплексные селекторы, содержащие комбинаторы, включая комбинатор-потомок. Будет ли это реализовано в быстром профиле (и, следовательно, CSS), еще предстоит проверить и подтвердить, но как только это будет реализовано, вы сможете использовать его для исключения элементов с определенными предками. Из-за того, как работают селекторы, отрицание должно выполняться на самом элементе, а не на предке, чтобы работать надежно, и поэтому синтаксис будет выглядеть немного иначе:

h2:not(div h2) { color: #900; }

Любой, кто знаком с jQuery, быстро заметит, что этот селектор работает в jQuery сегодня . Это одно из многих различий между селекторами 3 :not() и jQuery :not() , которые Селекторы 4 стремятся исправить.

Поделиться


BoltClock    

16 августа 2011 в 19:52


18

Элемент <html> не является элементом <div> . Элемент <body> не является элементом <div> .

Таким образом, условие «имеет предка, который не является <div>» будет справедливо для всех элементов.

Если вы не можете использовать селектор > (дочерний), я не думаю, что вы сможете сделать то, что пытаетесь сделать, — это действительно не имеет смысла. Во втором примере <article> не является div, так что это тоже соответствует *:not(div) .

Поделиться


RichieHindle    

16 августа 2011 в 19:53

Похожие вопросы:

Существует ли противоположный псевдокласс CSS для: hover?

Есть ли псевдокласс в CSS для указания :not(:hover) Или это единственный способ указать элемент, который не зависает? Я просмотрел несколько ссылок CSS3 и не вижу никакого упоминания о псевдоклассе…

Увеличивает ли псевдокласс: not специфичность селектора?

Я читал на css трюках, что: не следует добавлять дополнительную специфику. Но, похоже, так оно и есть? https://css-tricks.com/almanac/selectors/n/not / Специфика псевдокласса: не псевдокласс — это…

:имеет CSS псевдокласс в Nokogiri

Я ищу псевдокласс :has в Нокогири . Он должен работать точно так же, как селектор jQuery has . Например: <li><h2><a href=dfd>ex1</a></h2><span…

CSS псевдокласс отрицания не работает

Я слишком многого прошу от этого псевдо-отрицания. У меня есть такая структура HTML: <div> <div class=item></div> <div class=item></div> <div…

CSS общий сиблинг-комбинатор (~) не работает с псевдоклассом отрицания (: not)

У меня есть список контактов, который генерируется как неупорядоченный список с атрибутами HTML5 data , назначенными каждому элементу списка. Значения атрибутов data являются одиночными буквами для…

CSS специфичность: not() псевдокласс

У меня есть этот маленький HTML: <div id=column> <div class=ticker> <ul> <li>Item 1</li> </ul> </div> </div> Для элементов ul вне класса .ticker , но…

CSS псевдокласс для элементов без текста

Существует ли псевдокласс CSS для элементов без текстовых узлов, подобных этому: div:nocontent { display: none; } Я знаю, что существует псевдокласс :empty , но то, что я хочу, должно игнорировать…

Что происходит, когда браузер не поддерживает псевдокласс CSS?

Что произойдет, если браузер не поддерживает псевдокласс CSS, например :dir ? Например: html:dir(rtl) { color: red; } Будут ли браузеры просто игнорировать это правило, если они не понимают…

CSS: использование отрицания на * всех элементах

Я хочу выбрать все <img> элементов, которые находятся внутри <article> , а не внутри <figure> Следующие 2: Как создать правило css для всех элементов, кроме одного класса?…

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

Псевдокласс :empty представляет любой элемент, у которого вообще нет потомков. Существует ли подобный псевдокласс, представляющий любой элемент, не имеющий видимых дочерних элементов (игнорируя…

Как работает в css псевдокласс not?

От автора: всем привет. Сегодня мы с вами рассмотрим достаточно специфичную тему. А именно, как работает в css псевдокласс not. Возможно, многие из вас вообще ничего не знают о нем, но тем не менее данный псевдокласс иногда очень помогает при верстке. Подробно суть работы с ним рассмотрим сейчас.

Вообще как выглядит выбор элементов в css? Вы прописываете какой-либо селектор и таким образом происходит выбор. Например: p{} – выберет все абзацы; table{} – выберет все таблицы;

И так далее. Так вот, псевдокласс not работает наоборот – он позволяет не выбрать какой-либо элемент. Сам по себе псевдокласс применять нет смысла, а только в связке с другими селекторам. Not позволяет как бы исключить элемент из выбора. Например, выбрать все списки, кроме какого-то одного.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<p>Абзац 1</p>
<p>Абзац 2</p>
<p class = «p3»>Абзац 3</p>

<p>Абзац 1</p>

<p>Абзац 2</p>

<p class = «p3»>Абзац 3</p>

Как видите, третьему абзацу мы дали стилевой класс. Допустим, вы хотите сделать цвет текста во всех абзацах, кроме одного – зеленым. Пишем вот так:

p:not(.p3){
color: green;
}

p:not(.p3){

color: green;

}

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

Синтаксис псевдокласса not, как вы уже могли догадаться, таков:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В случае с абзацами мы вполне могли обойтись и без стилевого класса. Давайте его уберем у третьего абзаца и подумаем, как его теперь можно исключить? Ну конечно, в голову в первую очередь приходит nth-child или nth-of-type. Это псевдоклассы, которые позволяют выбрать элемент по его порядковому номера в родительском элементе.

p:not(:nth-of-type(3)){
color: green;
}

p:not(:nth-of-type(3)){

color: green;

}

Вот такой код позволит вам исключить третий абзац и ему не будет задан зеленый цвет.

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

.class:not(p.red:nth-of-type(7)){}

.class:not(p.red:nth-of-type(7)){}

То все это без проблем будет работать, но только при условии, что указанный в условии элемент есть и есть что исключать.

Применение в реальной практике

Хорошо, мы рассмотрели достаточно оторванные от реальности примеры, но и в реальной практике псевдокласс not может вам пригодится. Например, при работе с меню.

Если в меню есть разделители, то обычно разделитель не должен присутствовать у первого или последнего пункта меню. И это очень легко реализовать. Просто задаем первому или последнему пункту какой-нибудь стилевой класс, либо исключаем его с помощью nth-child/nth-of-type.

Опять же, тут вполне можно было бы обойтись и без not. Вы можете сначала задать разделители для всех пунктов, а потом просто переопределить для нужного пункта стиль, убрав этот разделитель. Но это уже потребует от вас написать на 2-4 строчки кода больше. В случае с not же вы очень элегантно в одной строке решаете всю проблему.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

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

Обычно нам требуется задать некое форматирование для классов, элементов или id.  Однако, бывают случаи, когда нужно назначить форматирование для элементов, которые не имеют какого-либо селектора, либо для всех, кроме определенного селектора. Чаще всего таким селектором является селектор класса, хотя это далеко не единственный вариант. Для таких случаев нам понадобится псевдокласс :not.

Псевдокласс :not, по сути, позволяет нам исключить один или несколько тегов по указанному селектору из css-форматирования с заданными правилами. Общий вид записи селектора с использованием этого псевдокласса таков:

селектор1:not(селектор2) { свойства }

селектор1:not(селектор2) { свойства }


Давайте рассмотрим несколько примеров форматирования элементов с использованием псевдокласса :not.

Форматирование статей, которые не содержат определенный класс

Для всех статей, которые не имеют класса tag-images, зададим цвет фона, чтобы было заметней.

article:not(.tag-images) {
background-color: #b3d5f7;
}

article:not(.tag-images) {

  background-color: #b3d5f7;

}


Выделение цветом в этом случае выполняется для всех статей, кроме тех, которые так или иначе посвящены теме изображений. В примере это статьи по CSS и JavaScript — они выделены голубым фоном. Посмотрим, как это работает:

Псевдокласс :not и мультиклассы

Для страниц в CMS WordPress характерно назначение большого количества классов для элемента body. Например, так:

<body>

<body>


Для того чтобы отформатировать страницы, не содержащие всего текста статей, можно написать такой селектор:

body:not(.home):not(.single):not(.single-post) {
width: 90%;
}

body:not(.home):not(.single):not(.single-post) {

  width: 90%;

}


Изменяем цвет всех элементов списка, кроме первого

Например, для того чтобы задать цвет для всех элементов списка, кроме первого, необязательно добавлять для него класс. Достаточно использовать псевдокласс :not в таком виде:

.testlist li:not(:first-child) {
color: green;
}

.testlist li:not(:first-child) {

  color: green;

}


Результат выглядит так, как и планировалось:

  • List Item 1

  • List Item 2

  • List Item 3

  • List Item 4

  • List Item 5

  • List Item 6

Форматируем ячейки таблицы

Примерно такой же вариант форматирования, как для списка, можно использовать для двух столбцов таблицы:

td:not(:nth-child(2)):not(:nth-child(3)){
text-align: center;
background-color: #cde;
}

td:not(:nth-child(2)):not(:nth-child(3)){

  text-align: center;

  background-color: #cde;

}


В этом случае текст с выравниванием по центру и светло-голубым фоном будут иметь все колонки, кроме второй и третьей.






НаименованиеЦветАртикулЦена, грн.
Стол пластиковый Curver Eliseбежевый17180054bj1 200
Стол пластиковый Curver Lisa бежевыйкоричневый17180053bj792
Стул пластиковый Allibert Montrealсерый17197675s1 224
Стул пластиковый Keter Harmony armchairсеро-коричневый17201284br1 800

Псевдокласс :not для форматирования полей формы

Допустим, у нас есть форма, в которой созданы несколько текстовых полей (<input type="text">, <input type="email"> и  <input type="password">), а также поля типа number (<input type="number">). Только для текстовых полей нам нужно добавить закругления границы и тень, а также ширину и внутренние отступы. Можно это сделать, перечислив типы нужных полей или исключив ненужные с помощью псевдокласса :not:

input:not([type=»number»]){
padding: 10px;
width: 290px;
border-radius: 6px;
box-shadow: 0 0 6px #9ecbf8;
}

input:not([type=»number»]){

  padding: 10px;

  width: 290px;

  border-radius: 6px;

  box-shadow: 0 0 6px #9ecbf8;

}


Посмотрим на примере:



Просмотров:
146

Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)