Псевдокласс :has — знакомство
В этом туториале мы покажем как с помощью :has можно изменять раскладку внутри простых блоков-оповещений в случае наличия и отсутствия кнопки.
Вначале добавим разметку оповещения без кнопки и стилизуем его.
Создадим базовую структуру стилей для .notification и параграфа внутри неё.
Так как внутри блока находится только текст, делаем стили максимально простыми, сохраняем блочный тип бокса у контейнера.
Добавляем в разметку ещё одно оповещение, содержащее кнопку.
Добавляем код для стилей кнопки.
Оповещение с кнопкой выглядит плохо. Для нормального отображения кнопку и текст оповещения нужно разместить в две колонки.
Сделаем .notification флекс-контейнером, распределим элементы по сторонам и добавим gap.
Вариант с кнопкой стал выглядеть хорошо. Но сломался вариант без кнопки: текст стал выравниваться по левому краю, а нужно — по центру.
С помощью дополнительнго класса мы могли бы сделать два варианта оформления блока — с кнопкой и без.
Но есть важное ограничение — мы не знаем, когда кнопка появится внутри блока, а когда нет, поэтому дополнительный класс использовать не можем.
Решить нашу задачу на чистом CSS можно с помощью :has.
Изменим селектор последнего CSS правила на .notification:has(button). Теперь дополнительные стили для контейнера будут применяться только тогда, когда внутри есть кнопка.
Благодаря такой гибкой стилизации мы можем использовать оповещения с любым содержанием, и они будут выглядеть хорошо.
