Difference between root and class

HTML-CSS
1

Why root is used? I feel it acts like a class but not able to figure out the difference.

2

Hi @krishnan468

What do you mean when you say root? Can you give an example?

3

Hi Krishnan468!

First, I understand the confusing. First of root is pseudo-class. I don’t know how far you are with CSS ? But, A pseudo-class is used to define a special state of an element.

Example: you got a link and you want to change the hover, you can add a:hover to changed that.

Now back to the question why do we use root? It allows you to target the highest-level “parent” element in the DOM. This is usefull since, CSS can be used for other formats like: SVG/XHML. And it will still work!

For more information about :root here are some links you can go!


1 Like
4

example:-
:root {
–penguin-skin: gray;
–penguin-belly: pink;
–penguin-beak: orange;
}
It looks different than class since we rae using colon , further i am not able to understand that if it does the same function as class then why we are using it in first place?

5

It’s not a class, it’s the root element in the document (normally the same as html, but it could be other things like svg depending on what the document is). You want variable set at the very highest possible level, so :root will generally always be the right place to do it.