CSS последние годы развивается очень активно и нововведения могут сильно влиять на нашу верстку. Поэтому сегодня мы рассмотрим достаточно свежие селекторы, вышедшие пол года назад, которые Вы уже можете использовать в своих проектах, а так же поговорим о том, что такое специфичность.
Псевдокласс :is
Допустим у нас есть несколько карточек с классом .card, которые так же могут иметь классы .card_active и .card_visited. Что бы задать для них стили напишем такой селектор:
Это стандартное решение, но придется каждый раз прописывать и сам класс .card. Вместо этого воспользуемся псевдоклассом :is :
В результате селектор выберет все .card имеющие классы, которые мы передали в :is. Так мы сократим наш код и сделаем его более читаемым, но этим применение :is не ограничивается.
Если нам нужно стилизовать вложенные элементы, мы можем передать их классы в :is после пробела:
Кроме того :is не обязательно должен принимать селекторы дочерних элементов. В него можно передать селекторы родителя и указать после пробела нужные вложенные элементы:
Псевдокласс :where
Псевдокласс :where делает все то же, что и :is, но у него отличается расчет специфичности.
Для начала вспомним что такое специфичность. В двух словах - это приоритет применения стилей. Рассчитывается она путем присвоения веса каждому типу селектора. Наибольший вес имеют id элемента, потом классы, а наименьший - теги. Далее суммируются веса каждого типа селектора в правиле, и если два правила имеют одинаковую специфичность, применяется последнее в CSS-файле. Так же следует помнить о модификаторе !important. Стили, где он объявлен имеют наибольший приоритет, а если он объявлен в нескольких конкурирующих стилях - применен будет наиболее специфичный.
Так у последнего примера из части про :is специфичность будет (0,1,1) (нет id, выбирается один из переданных в псевдокласс классов и один тег), а если в нем заменить :is на :where, то переданные в псевдокласс классы не будут учитываться при подсчете специфичности и она будет равна (0, 0, 1).
Так правильно выбирая между :is и :where мы можем гибко управлять специфичностью селекторов в нашем CSS.
Псевдокласс :has
Что если нам нужно стилизовать родителя в зависимости от его содержимого? С псевдоклассом :has это проще простого. Например, если нам нужно задать цвет заднего фона для div только при наличии дочерних h3, селектор будет выглядеть так:
Или еще одна типовая задача: как задать border-bottom всем элементам, кроме последнего? Можно стилизовать их все, а потом сбросить значение для :last-child, но мы добьемся того же эффекта одной более лаконичной строкой CSS, передав в псевдокласс :has комбинатор следующего соседнего элемента (+) и его селектор:
Псевдокласс :not
Давайте вернемся к примеру с карточками из рассказа про :is. Если перед нами стоит обратная задача - стилизовать все карточки, кроме активной и посещенной, то ее можно решить используя псевдокласса :not. По принципу работы он похож на :is, но делает все с точностью до наоборот. Передаем в него нужные селекторы и к ним не будут применены стили. Специфичность так же считается как в :is.
Псевдокласс :not можно комбинировать с другими селекторами инвертируя их поведение. Так, обернув в него псевдокласс :has из примера с постами, мы применим стили только к последнему посту:
Заключение.
Надеюсь что эти селекторы найдут применение в Ваших проектах, а если Вы хотите погрузиться в изучение HTML и CSS, я подготовил подробный курс.
Полный курс - HTML и CSS - полный курс по вёрстке с нуля
- 19 часов коротких лекций по 10 - 15 минут
- 15 упражнений для закрепления на практике
- 19 тестов для проверки знаний
- Рейтинг ⭐ 4.9 на основании отзывов
- 30-ти дневная гарантия возврата денег