CSS-live.ru

«Родительский селектор» :has() — в реальность!

скриншот сообщения о начале реализации :has()

Радостная весть от 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. Это тоже может быть интересно:

Оставить комментарий

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

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.