Обычно нам требуется задать некое форматирование для классов, элементов или id. Однако, бывают случаи, когда нужно назначить форматирование для элементов, которые не имеют какого-либо селектора, либо для всех, кроме определенного селектора. Чаще всего таким селектором является селектор класса, хотя это далеко не единственный вариант. Для таких случаев нам понадобится псевдокласс :not.
Псевдокласс :not, по сути, позволяет нам исключить один или несколько тегов по указанному селектору из css-форматирования с заданными правилами. Общий вид записи селектора с использованием этого псевдокласса таков:
1 | селектор1:not(селектор2) { свойства } |
Давайте рассмотрим несколько примеров форматирования элементов с использованием псевдокласса :not.
Форматирование статей, которые не содержат определенный класс
Для всех статей, которые не имеют класса tag-images
, зададим цвет фона, чтобы было заметней.
1 2 3 | 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. Например, так:
1 | <body class="post-template-default single single-post postid-1277 single-format-standard customize-support"> |
Для того чтобы отформатировать страницы, не содержащие всего текста статей, можно написать такой селектор:
1 2 3 | body:not(.home):not(.single):not(.single-post) { width: 90%; } |
Изменяем цвет всех элементов списка, кроме первого
Например, для того чтобы задать цвет для всех элементов списка, кроме первого, необязательно добавлять для него класс. Достаточно использовать псевдокласс :not в таком виде:
1 2 3 | .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
Форматируем ячейки таблицы
Примерно такой же вариант форматирования, как для списка, можно использовать для двух столбцов таблицы:
1 2 3 4 | 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:
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()
позволяет назначить свойства для тех элементов, у которых есть какой-либо класс, атрибут или другой селектор. Записывается он так:
1 2 3 | селектор:is(selector) { свойство: значение; } |
Для примера рассмотрим назначение цвета для заголовка и абзацев статьи, для которой указан класс .bg
.
See the Pen :is() selector Example by Elen (@ambassador) on CodePen.