Uploaded April 2022 | Updated September 2026, 2 hours ago

---

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: codepen.io/ZoranJambor/pen/vYpzGwV/afd64fbfcc0e617c25e09a1b5d777795
Code Demo: codepen.io/ZoranJambor/pen/eYyLyZL/210fb67ac7d8a67daa64ebfe4b16fd53

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

🔥 Start Using color-scheme CSS Property 👉 youtu.be/nQzRTsjBXfQ

📖 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:
💌 css-weekly.com

Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly

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

- Zoran Jambor
#css