👩💻 Что такое :has() в CSS и как он работает?
:has() — это новый CSS-псевдокласс, который позволяет выбирать элемент, если он содержит определённые дочерние элементы. Его часто называют "псевдоклассом родителя".
➡️ Пример:
Текст
Нажми меня
Только текст
.card:has(button) {
border: 2px solid blue; /* Стили для карточек с кнопкой */
}
🗣️ В этом примере :has(button) выбирает .card, если внутри неё есть кнопка. Это позволяет применять стили на основе содержимого элемента, улучшая контроль над структурой.
CodeBase | Frontend | #css
:has() — это новый CSS-псевдокласс, который позволяет выбирать элемент, если он содержит определённые дочерние элементы. Его часто называют "псевдоклассом родителя".
➡️ Пример:
Текст
Нажми меня
Только текст
.card:has(button) {
border: 2px solid blue; /* Стили для карточек с кнопкой */
}
🗣️ В этом примере :has(button) выбирает .card, если внутри неё есть кнопка. Это позволяет применять стили на основе содержимого элемента, улучшая контроль над структурой.
CodeBase | Frontend | #css