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

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

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

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

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

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

date-in-js

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

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

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

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

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

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

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

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

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

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

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

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

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

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

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

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

Наименование Цвет Артикул Цена, грн.
Стол пластиковый 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:

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

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

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

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

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

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *