Have you considered where to add the CSS code - in the component or master stylesheet? It may be more effective to include it in the project's master style sheet.
If > * > isn't working, it could be due to the complexity of your DOM structure once the app is rendered. Inspecting the browser would provide more insight. Have you tried using:
first-child third-child
While Angular components are typically encapsulated, using this type of CSS might not align with Angular's design principles. Consider incorporating a parameter on the third-child element to specify a mode instead:
<component-parent>
<first-child>
<second-child>
<third-child mode="nested"></third-child>
</second-child>
</first-child>
</component-parent>
Then, determine the styling based on the variable.
Alternatively, targeting elements in the view rather than tag names could be a more CSS-centric approach. For instance, within the view of third-child:
<div class="third-child">
... component body here
</div>
(repeat for other components) and apply CSS like so:
.first-child .third-child {
display: flex;
flex-direction: row;
}
Consider adjusting the ViewEncapsulation settings, such as setting it to none across all components:
@Component({
...
encapsulation: ViewEncapsulation.None
})
You can then gradually remove this setting through trial and error until finding the minimum number of components that need it. This approach is useful when dealing with unchangeable third-party components nested within your own, with no known adverse effects in my projects.