CSS :: Псевдокласс :not

Псевдокласс :not (от англ. not – не) позволяет выбрать все элементы требуемого типа, которые не подходят под шаблон указанного в скобках селектора. При этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы. Например, если задано правило span:not([contenteditable]) {блок объявлений}, то в документе будут выбраны все элементы «span», у которых отсутствует атрибут contenteditable.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html-документа не указываются и отделяются от указанного в селекторе элемента двоеточием «:». При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Синтаксис

<селектор>:not {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/selectors-4/#negation

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/:not

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	
	<style>
		
		/* Выбираем все элементы «span», у которых */ 
		/* не задан атрибут «contenteditable». */
		span:not([contenteditable]){
		color: red;			 
		}
		
	</style>
	
</head>
<body>

	<span>Нередактируемый элемент «span».</span><br>
	<span contenteditable>Редактируемый элемент «span».</span><br>	
	<span>Опять нередактируемый элемент «span».</span>

</body>
</html>

Пример №1