:has(), или, как его ещё называют, родительский селектор: https://utilitybend.com/blog/practical-uses-of-the-has-relational-pseudo-classАвтор делится полезными примерами того, как это нововведение в CSS может изменить мышление при вёрстке страниц. Можно додумать свои примеры:
1.
form:has(:invalid) — способ как-то стилизовать форму, в которой есть ошибки заполнения инпутов. Так, например, можно показывать блок с сообщениями об ошибках.2.
.grid:has(img) — способ понять, нужно ли перестроить сетку под наличие в ней картинок. Полезно для всяких плиточных интерфейсов.3.
.article:not(:has(h1)) — можно вообще прикрутить CSS-«линтер», который будет подсвечивать несоблюдение каких-то договорённостей в команде, вроде «в статье должен быть заголовок первого уровня».
.article:not(:has(h1)) {
background-color: red;
}
Дать QA набор таких сниппетов — и тестирование той же доступности вёрстки станет быстрее.
Кстати, с
:not автор немного запутался. В его примере селектор выглядит .articles:has(:not(figure)), что по сути значит «выбери элемент с классом articles, внутри которого есть что-то, кроме figure». То есть селектор .articles:has(:not(figure)) article по сути не имеет смысла, проще написать .articles article — эффект тот же, только специфичность селектора ниже.Но за что люблю современный веб, так за то, что можно в твиттере написать автору, а он пообещает посмотреть пример внимательнее и исправить. Так и сделал, ждём апдейта статьи.
