Why CSS direct descendant selector is not applied on Angular component

Question

We have this simple main.html

<app>
   <sidebar></sidebar>
   <main-content>
      <router-outlet></router-outlet>
   </main-content>
</app>

When we load a simple component via routing (URL change), the HTML becomes:

<app>
   <sidebar></sidebar>
   <main-content>
      <router-outlet></router-outlet>
      <component></component>
   </main-content>
</app>

The first question is why <component> is not nesting inside <router-outlet>, and becomes a sibling.

However, this CSS is not applied on <component> tag:

app sidebar main-content > * {
   background: red;
}

When we check, <router-outlet> has this style, but <component> which is the direct child of <main-content> doesn't have this style.

What is wrong here?

Answer 1

Based on your stated code:

<app>
   <sidebar></sidebar>
   <main-content>
      <router-outlet></router-outlet>
      <component></component>
   </main-content>
</app>

this

app sidebar main-content > * {
   background: red;
}

will not work because main-content is not a child of sidebar but is a sibling.

I'd suggest you try

app sidebar + main-content > * {
   background: red;
}

or even

app main-content > * {
   background: red;
}