What exactly is :root selector in CSS?

Рет қаралды 5,921

Күн бұрын

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/Jj...
Custom Properties on :root Issue: github.com/w3c/csswg-drafts/i...
::selection background not visible issue: github.com/eslint/eslint.org/...
📖 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 KZfaq15 to get an additional 15% off on the already discounted, pre-launch price.
Keep up-to-date with CSS Weekly:
👉 Twitter: / cssweekly
👉 Instagram: / cssweekly
👉 Facebook: / cssweekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: / zoranjambor
👉 LinkedIn: / zoranjambor
- Zoran Jambor
#css #cssselectors

Пікірлер: 22

@CeeTheJay Жыл бұрын

I appreciate how you break things down so clearly. Definitely helpful. Thank you, Zoran!

@CSSWeekly Жыл бұрын

Thank you so much for the kind words! I’m thrilled to hear that it’s clear! 🙂

@D7460N Жыл бұрын

Very good. Thank you for posting.

@CSSWeekly Жыл бұрын

Thanks so much for watching and commenting! 🙏

@JohnnyB.Good10 Жыл бұрын

good to know!👍👍

@CSSWeekly Жыл бұрын

Thank you, I’m glad to hear you found it useful! 🙂

@ScriptRaccoon Жыл бұрын

I didn't know that tbh! I just put the variables on the :root since everybody did that and it worked globally. I wondered if it would make any difference to put the variables on the body tag? I mean, this is where we want to style things, right?

@CSSWeekly Жыл бұрын

I’m glad to hear you learned something! 🙏 Sure, you can put variables on body tag, it won’t make any practical difference, I think. 🙂

@bogdanlazy1997 7 ай бұрын

Man, u look incredible! btw thanks for video

@CSSWeekly 7 ай бұрын

Thanks! 🙏 This was actually recorded before I turned 40-so check out new videos, I look even more incredible now! 😉

@AdilKhan-vf2es 9 ай бұрын

Good stuff bro

@CSSWeekly 9 ай бұрын

Thank you so much, my friend! 🙏

@activenode Жыл бұрын

Nice one.

@CSSWeekly Жыл бұрын

Thank you so much for watching and for your nice comment! 🙂

@jmsherry 3 ай бұрын

Slightly tangential: I keep seeing videos where the camera is inset as a circle and also a few times where you highlight blocks of code (e.g. 38s in): I was wondering what software is used to so that? (I think it'd be handy for me when explaining things at work to others). Thanks! :)

@CSSWeekly 3 ай бұрын

Thanks for your question, James! 🙏 I'm using Screenflow to record and edit my KZfaq videos, so I do all of this manually. There are some practical apps like Loom that make this a bit easier. I used Loom at work precisely to demonstrate/explain things to others quickly. 🙂

@jmsherry 3 ай бұрын

@@CSSWeekly That's awesome! Thank you for the tips! :)

@CSSWeekly 3 ай бұрын

You're very welcome, James! 🙂