16.01.2026 07:07
🎨 CSS :has() - это легальный чит-код в верстке Мы привыкли называть :has() «селектором родителя», но это определение си
🎨 CSS :has() - это легальный чит-код в верстке
Мы привыкли называть :has() «селектором родителя», но это определение сильно преуменьшает его мощь. Это инструмент, который позволяет отказаться от JS и лишних классов-модификаторов для управления состоянием UI.
Вот два сценария, где :has() меняет правила игры:
1. Контекстная стилизация (без BEM-модификаторов)
Раньше, чтобы изменить стили карточки в зависимости от контента (например, есть ли внутри картинка или бейдж), мы писали JS-проверку или добавляли класс .card--with-image.
Теперь CSS сам смотрит внутрь:
/* Если внутри карточки есть картинка -> меняем грид */
.card:has(img) {
grid-template-columns: 1fr 1fr;
}
/* Если внутри есть сообщение об ошибке -> красим бордер */
.form-group:has(.error-message) {
border-color: red;
background: #fff0f0;
}
2. Селектор «предыдущего соседа»
В CSS всегда можно было стилизовать элемент, идущий после (h2 + p), но никогда - перед. С :has() это стало возможным.
Трюк: мы выбираем элемент, если за ним следует нужный нам сосед.
/* Стилизуем h2, ТОЛЬКО если сразу за ним идет список ul */
h2:has(+ ul) {
margin-bottom: 0; /* Убираем отступ, чтобы "приклеить" к списку */
color: var(--primary);
}
🔥 Поддержка в браузерах уже отличная (Baseline 2023). Если вы всё еще пишете useEffect или вешаете классы просто чтобы поменять стиль родителя при фокусе инпута (:focus-within не всегда хватает) или наличии элемента - удаляйте лишний код и берите :has().
👉 @frontend_1
Мы привыкли называть :has() «селектором родителя», но это определение сильно преуменьшает его мощь. Это инструмент, который позволяет отказаться от JS и лишних классов-модификаторов для управления состоянием UI.
Вот два сценария, где :has() меняет правила игры:
1. Контекстная стилизация (без BEM-модификаторов)
Раньше, чтобы изменить стили карточки в зависимости от контента (например, есть ли внутри картинка или бейдж), мы писали JS-проверку или добавляли класс .card--with-image.
Теперь CSS сам смотрит внутрь:
/* Если внутри карточки есть картинка -> меняем грид */
.card:has(img) {
grid-template-columns: 1fr 1fr;
}
/* Если внутри есть сообщение об ошибке -> красим бордер */
.form-group:has(.error-message) {
border-color: red;
background: #fff0f0;
}
2. Селектор «предыдущего соседа»
В CSS всегда можно было стилизовать элемент, идущий после (h2 + p), но никогда - перед. С :has() это стало возможным.
Трюк: мы выбираем элемент, если за ним следует нужный нам сосед.
/* Стилизуем h2, ТОЛЬКО если сразу за ним идет список ul */
h2:has(+ ul) {
margin-bottom: 0; /* Убираем отступ, чтобы "приклеить" к списку */
color: var(--primary);
}
🔥 Поддержка в браузерах уже отличная (Baseline 2023). Если вы всё еще пишете useEffect или вешаете классы просто чтобы поменять стиль родителя при фокусе инпута (:focus-within не всегда хватает) или наличии элемента - удаляйте лишний код и берите :has().
👉 @frontend_1