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 Explorer | Chrome | Opera | Safari | Firefox |
9 | 1 | 9.5 | 3.2 | 1 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile |
2.1 | 1 | 10 | 3.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