Покращуйте свої навички CSS за допомогою селектора :has()

Селектор :has() в CSS відкриває нові можливості, які раніше були доступні лише з JavaScript. Він дозволяє "дивитися вперед" і стилізувати батьківський або предківський елемент, а потім розширювати селектор для цільового вибору одного або кількох наступників або дітей.

💡 Підтримка :has() зростає, і вона доступна з Safari 15.4 та Chrome/Edge 105. Вона також за прапорцем у Firefox з версії 103. Доки повна підтримка не буде доступна, рекомендується перевірити цей порадник про підтримку :has сьогодні від Bramus Van Damme.

🚀 Селектор :has() може працювати разом з іншими комбінаторами та псевдо-класами для створення складних селекторів. Селектори можуть бути простими, наприклад, img, або складними з комбінаторами, такими як img + p.

🧠 :has() - це один з чотирьох функціональних псевдо-класів, до інших належать :is(), :where(), та :not(). Кожен з них приймає список селекторів з декількома унікальними особливостями.

⚡ Селектор :has() може бути використаний для створення надзвичайно потужних виборів, що неможливі без його використання. З його допомогою можна вибирати та стилізувати попередніх наступників на основі умов, що відбуваються після них.

• 📌 :has() дозволяє стилізувати батьківські елементи та предки.
• 📌 :has() може працювати з іншими комбінаторами та псевдо-класами.
• 📌 :has() дозволяє вибирати та стилізувати попередніх наступників на основі умов, що відбуваються після них.