I have html essentially
<mat-tab-group>
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
How can I use css (or any method really) to hide the outer tabs groups mat-tab-header element, but not affect the inner tab header?
Figured it out, just had to select direct child
<mat-tab-group class="invisible-tabs">
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
.invisible-tabs {
> .mat-tab-header {
display: none;
}
}