What is the difference between app-root{} and app-root * {} in angular css/scss

Question

First, I undertand that app-root{} represents the HTML tag <app-root></app-root> .

I have seen this: wildcard * in CSS for classes , but I still dont't understand.

Why would one ever use app-root * {}?

I have seen it being used on this open-source project .

What difference does it have if you use app-root * {} rather than app-root{} in your styles file in angular?

EDIT: Changed app-root*{} to app-root * {} to more accurately represent the question.

Answer 1

Just to correct you, you have written app-root*{} . That is not what is in that stylesheet. They have app-root * {} (notice the spaces).

This means that every immediate child of app-root gets the styles.

If they had written app-rrot p {} , that would mean every p that is a child of app-root will get the styles. if they wrote app-root div {} , then every div that is a child of app-root would get the styles. But they have written app-root * {} , so every child (any element) of app-root gets those styles.

Answer 2

What you saw isn't app-root* but it's app-root * . The space between the selector and the asterisk ( * ) is very important, it means child of .

Instead, the asterisk means "any element".

Shortly, that selector means "any element that is child of app-root "