Why Pseudo class nth-child(x) pics wrong class?

Question

Sorry for messy title but this is the code (It's a fandom project I'm doing)

<style>
.portable-infobox.pi-theme-UUInfo section.pi-panel:first-child ul.wds-tabs li.wds-tabs__tab:nth-child(2){
    background-image:url("https://testit.fandom.com/Special:Filepath/Level_1_icon.png");
    background-size:10px;
    height:100px;
    background-color:#f00;
}
.portable-infobox.pi-theme-UUInfo section.pi-panel:nth-child(2) ul.wds-tabs li.wds-tabs__tab:nth-child(3){
    background-image:url("https://testit.fandom.com/Special:Filepath/Level_2_icon.png");
        background-size:10px;
}
.portable-infobox.pi-theme-UUInfo section.pi-panel:nth-child(3) ul.wds-tabs li.wds-tabs__tab:nth-child(3){
    background-image:url("https://testit.fandom.com/Special:Filepath/Level_0_icon.png");
        background-size:10px;
}

</style>

<aside role="region" class="portable-infobox pi-background pi-border-color pi-theme-UUInfo pi-layout-stacked">
<h2 class="pi-item pi-item-spacing pi-title pi-secondary-background">TestPage</h2>
    <section class="pi-item pi-panel pi-border-color wds-tabber">
        <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background" style="background-color:#B2AD8E;color:#000;">Combat and Details</h2>
                <ul class="wds-tabs">
                    
                        <li class="wds-tabs__tab wds-is-current">
                            <div class="wds-tabs__tab-label">
                                L0
                            </div>
                        </li>
                    
                        <li class="wds-tabs__tab">
                            <div class="wds-tabs__tab-label">
                                L1
                            </div>
                        </li>
                    
                        <li class="wds-tabs__tab">
                            <div class="wds-tabs__tab-label">
                                L2
                            </div>
                        </li>
                    
                </ul>
    </section>
    <section class="pi-item pi-panel pi-border-color wds-tabber">
                <ul class="wds-tabs">
                    
                        <li class="wds-tabs__tab wds-is-current">
                            <div class="wds-tabs__tab-label">
                                L0
                            </div>
                        </li>
                    
                        <li class="wds-tabs__tab">
                            <div class="wds-tabs__tab-label">
                                L1
                            </div>
                        </li>
                    
                        <li class="wds-tabs__tab">
                            <div class="wds-tabs__tab-label">
                                L2
                            </div>
                        </li>
                    
                </ul>
    </section>
</aside>

The problem is it takes that random tag as the first child. so the code

section.pi-panel:first-child

applies to it rather than the first actual section.

Is there a way to fix this? (I know I can ignore it and use it from 2nd one.But CSS needs to be generalized. So if there were 2 h2 tags or 5 h2 tags CSS should work without re-coding)

Answer 1

It is because nth-child does not depend on the selective class or tag. for example,

<div class="parent">
   <div></div>
   <h2></h2>
   <div></div>
</div>

and you write CSS,

.parent div:nth-child(2){}

does not apply 2 2nd div rather it applies to the h2 tag. This is because nth-child is not effected by the selector before it but rather the parent itself. So yes there is no way of achieving this without using something like JS.