Target Angular mat-checkbox nested dinamically created element - css

Question

I have a series of checkboxes that I create using mat-checkbox, with it respective Select all one. What I need is to target that specific (and first) checkbox and hide it. Only the checkbox, not the label or any other element within mat-checkbox.
My checkboxes are default ones, so an example would be something like this:
Demo
After the elements are created, you have a structure that looks like this:
<mat-checkbox _ngcontent-ici-c72="" class="mat-checkbox mat-accent ng-valid ng-dirty ng-touched"
ng-reflect-model="false" ng-reflect-options="[object Object]" d="mat-checkbox-1">
<label class="mat-checkbox-layout" for="mat-checkbox-1-input">
<div class="mat-checkbox-inner-container">
<input type="checkbox" class="mat-checkbox-input cdk-visually-hidden" id="mat-checkbox-1-input" tabindex="0"
aria-checked="false">
<div matripple="" class="mat-ripple mat-checkbox-ripple mat-focus-indicator"
ng-reflect-trigger="[object HTMLLabelElement]" ng-reflect-disabled="false" ng-reflect-radius="20"
ng-reflect-centered="true" ng-reflect-animation="[object Object]">
<div class="mat-ripple-element mat-checkbox-persistent-ripple"></div>
</div>
<div class="mat-checkbox-frame"></div>
<div class="mat-checkbox-background"><svg version="1.1" focusable="false" viewBox="0 0 24 24"
xml:space="preserve" class="mat-checkbox-checkmark">
<path fill="none" stroke="white" d="M4.1,12.7 9,17.6 20.3,6.3" class="mat-checkbox-checkmark-path"></path>
</svg>
<div class="mat-checkbox-mixedmark"></div>
</div>
</div>
<span class="mat-checkbox-label"><span style="display: none;">
</span>Select All</span>
</label>
</mat-checkbox>
Everything created after the page is loaded by Angular, except the span element that contains Select All.
I need to target only the first element that contains the class mat-checkbox-inner-container
So far, if I try via CSS, all elements with that class are hidden, i.e. all checkboxes, not only the first one.
I've also tried to create a class in my CSS and add it via TS, with no positive result. This is the snippet for that:
checkHider():void {
let elem = document.getElementsByClassName("mat-checkbox-inner-container")[0];
elem.classList.add("hider");
}

Answer 1

I was able to get the element inside the ngOnInit function, and it worked.
This is the snippet. Note that the position is only specific to my case.
let elem = document.getElementsByTagName('div')[6];
elem.setAttribute("style", "display: none");