Uploaded June 2023 | Updated September 2026, 2 hours ago

---

A brief guide outlining how :root pseudo-class in CSS works, where it's often used and why, along with potential pitfalls.

🔗 Links
CodePen Demo: codepen.io/ZoranJambor/pen/JjeKLEW
Custom Properties on :root Issue: github.com/w3c/csswg-drafts/issues/6641
::selection background not visible issue: github.com/eslint/eslint.org/issues/431

📖 Timestamps
00:00 What is :root pseudo-class
01:06 How :root in SVG works
03:21 Tip: Don’t define all your variables on :root
04:23 Pitfalls with :root inheritance
05:09 Should you use :root in your CSS?

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

Course Mastering Prettier & Stylelint
🔥 Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
🏷️ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.

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 #cssselectors