In-Depth Guide to CSS Parent Selector :has()

Опубликовано: 14 Апрель 2022
на канале: CSS Weekly

2,426

144

Learn how :has() pseudo-class works and how it can help you create complex UI interactions without tweaking HTML or using JavaScript.

Additionally, find out how you can use :has() to create a fascinating hover effect that would otherwise be impossible without quite a lot of JavaScript.

🎨 Codepen Demos
Staircase Effect: https://codepen.io/ZoranJambor/pen/vY...
Code Demo: https://codepen.io/ZoranJambor/pen/eY...

📚 Resources on :has()
MDN entry: https://developer.mozilla.org/en-US/d...
Can I Use: https://caniuse.com/?search=has

🔥 Start Using color-scheme CSS Property 👉    • Start Using color-scheme CSS Property...

📖 Chapters
00:00 Intro
00:27 How :has() works
03:40 How to select a previous sibling
04:55 Combining :has() with :not()
05:37 How to test if a browser supports :has()
06:19 Create a staircase hover effect
09:00 Conclusion

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Keep up-to-date with CSS Weekly:
👉 Twitter:   / cssweekly
👉 Instagram:   / cssweekly
👉 Facebook:   / cssweekly

Keep up to date with what I'm up to:
🔗 Blog: https://zoranjambor.com
👉 Twitter:   / zoranjambor
👉 LinkedIn:   / zoranjambor

- Zoran Jambor
#css