:has в CSS — псевдокласс из будущего 👽 на примере карточки новости

00:00 Интро
00:31 Как работают селекторы
01:19 Изменение цели
02:53 Описание карточки
04:22 Описание задачи
04:56 Создание вариаций
06:19 Варианты модификаторов
07:23 Как тут поможет has
08:15 Запуск Chrome с флагом
09:30 Замена модификаторов
10:31 Случай посложнее
11:27 Простой сложный селектор
12:24 Демонстрация гибкости
12:50 Кухня разработки has
14:33 Выводы
15:30 Аутро

Нравится? Становитесь патронами   / pepelsbey  

Карточка на модификаторах https://pepelsbey.github.io/playgroun...
Карточка с псевдоклассом :has https://pepelsbey.github.io/playgroun...

Meet :has, A Native CSS Parent Selector https://www.smashingmagazine.com/2021...
Can I :has() https://bkardell.com/blog/canihas.html
WIP: Add has pseudo class https://chromium-review.googlesource....

* * *

Камера: Blackmagic Pocket Cinema 4K
Объектив: Panasonic 12–35 мм, f/2,8
Микрофон: Audio-Technica BP40
Свет: Amaran 200d + Light Dome
Софт: DaVinci Resolve, iZotope RX