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

Содержание

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

Псевдокласс :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» (кнопка «Отправить»).

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

СпецификацияСтатус
Selectors Level 4Рабочий проект
Selectors Level 3Рекомендация

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

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

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

Браузеры: Настольные Мобильные    

?

Internet ExplorerChromeOperaSafariFirefox
919.53.21

AndroidFirefox MobileOpera MobileSafari Mobile
2.11103.2

Браузеры

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

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

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

Псевдоклассы

Псевдоклассы :not и :is в CSS.

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

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

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

Синтаксис псевдокласса :not

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

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

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

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

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

Форматирование тега article

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

article:not(.tag-images) {

  background-color: #b3d5f7;

}

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

Использование изображений Unsplash.com на страницах сайта

На этом ресурсе вы можете найти вполне конкретное изображение по его id или использовать несколько вариантов загрузки случайного фото. Начнем с последних и рассмотрим примеры.

Читать полностью

Объект Date в JavaScript. Методы. Примеры

Для манипуляций с датой и временем в JavaScript существует встроенный объект Date, которым довольно легко можно пользоваться для форматирования даты, трансформации в дату строки, расчета времени между датами.

Читать полностью

Сайты с бесплатными фоновыми изображениями

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

Читать полностью

CSS-анимация с помощью свойства transition

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

Читать полностью

Photoshop-плагины, текстуры, web-макеты и wordpress-темы

Здесь вы найдете ссылки на скачивание бесплатных плагинов и шаблонов для Photoshop, которые сможете использовать для работы и обучения. Также есть ссылки на сайты с текстурами для оформления фонов web-страниц.

Читать полностью

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

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

Классы для body в WordPress

<body>

<body>

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

Использование :not для 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

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

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

Псевдокласс :not для 2-х колонок таблицы

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 бежевый 17180054bj 1 200
Стол пластиковый Curver Lisa бежевый коричневый 17180053bj 792
Стул пластиковый Allibert Montreal серый 17197675s 1 224
Стул пластиковый Keter Harmony armchair серо-коричневый
17201284br
1 800

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

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

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

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

1

2

3

4

5

6

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

  padding: 10px;

  width: 290px;

  border-radius: 6px;

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

}

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

Псевдокласс :is()

В противовес псевдоклассу :not псевдокласс :is() позволяет назначить свойства для тех элементов, у которых есть какой-либо класс, атрибут или другой селектор. Записывается он так:

Псевдокласс :is(). Синтаксис

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

селектор:is(selector) {

свойство: значение;

}

Для примера рассмотрим назначение цвета для заголовка и абзацев статьи, для которой указан класс

.bg.

See the Pen :is() selector Example by Elen (@ambassador)
on CodePen.0

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

html — селектор :not в CSS

Задай вопрос

спросил

Изменено 5 лет, 6 месяцев назад

Просмотрено 4к раз

Мне нужно стилизовать текст во всех элементах HTML-документа, кроме тех, которые вложены в определенный класс. У меня нет контроля над HTML, я могу только изменять CSS.

Вот кусок кода:

 
<дел> <дел> текст в столбце 1
<дел> <дел> текст в столбце 2
<дел> <дел> текст в столбце 3