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.
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.
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"
