Радостная весть от Igalia (компании, подарившей нам гриды во всех основных движках и не только): сегодня они объявили о начале экспериментальной реализации в движке Blink одной из самых долгожданных фич CSS — псевдокласса :has()!

О :has() часто говорят как о «родительском селекторе», поскольку главная задача, где он нужен — разное оформление элементов в зависимости от их содержимого. Но он «умеет» выбирать не только предков, но и предыдущих соседей элемента, и не только. Потребность в таком селекторе очень давняя, не зря он давно есть в jQuery. Но в CSS-стандарты его долго «не пускали» опасения насчет производительности. Из-за них редакторы спецификации CSS-селекторов выделили было его в отдельный «статичный профиль», доступный только для скриптовых API типа querySelector, но не для оформления. А раз его нельзя использовать там, где он больше всего нужен, браузерам не было смысла возиться с его реализацией.

В 2019 году это досадное ограничение убрали. За это время браузеры накопили немало опыта в поддержке сложных CSS-селекторов (таких как :is и :where) и во всевозможных внутренних трюках для их ускорения. Самое время хотя бы попробовать — может, для современных браузеров и :has() не так уж страшен?

Подробнее о новом селекторе и работе над его реализацией можно прочитать в свежей статье Брайана Карделла.

Пожелаем же успеха команде Igalia! Пусть всё получится, другие браузеры смогут перенять опыт, и веб-разработчики получат новый долгожданный удобный инструмент. И воспользуемся моментом, чтобы напомнить о другой полезной возможности CSS-селекторов 4 уровня — :nth-child(An + B of <любой селектор>), позволяющей выбирать энный по счету элемент с определенным классом и не только — о которой разработчики браузеров почему-то всё время забывают, хотя в Safari она реализована еще 6 лет назад…

P.S. Это тоже может быть интересно:

• День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari
• CSS-выражения от контейнера для дизайнеров
• Голограммы, пленочные засветки и шейдеры на чистом CSS