How to apply css class to a component element when it's created by router-outlet?

Question

I have DOM that looks something like this:

    
    ...

         


        

Answer 1

since router injects the component after the the router-outler element, if we would like to style all injected component with the same set of rules the folowing rule is can be helpful.

the css "+" operator select the first sibling element of a certain type, while asterisk (*) is used as a wild card to select any 1st sibling of router-outlet

router-outlet + * {
  // your rules
}