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)

In the code above, the first child of your `
` tag is `
...
` and not a section. Try using `:first-of-type` instead of `:first-child` to get your first section. There is also an `:nth-of-type` pseudo-class — qrsngky, Jul 11 '22 at 08:53
It could be first. It could be not. That's the problem. The Only thing consistent is that it has the .pi-panel class. So that is why I am trying to select using that class. — DarkZeus, Jul 11 '22 at 09:06
`section:first-of-type` and `section:nth-of-type(...)` will skip all the `h2`. Do you have non-targeted `section`s inserted in there? — qrsngky, Jul 11 '22 at 09:12
Yes, I understood what you said... thing is this will be a general stylesheet that will apply to a bunch of pages where I have no control over what the structure be or add or remove anything manually (including classes and IDs). The only thing that is consistent is that any section I want to be stylized will have .pi-panel class. So I want 1st of them to be one style, 2nd to be another. — DarkZeus, Jul 11 '22 at 09:20
Is the following relevant? https://stackoverflow.com/a/29761839/4225384 However, even now, there is not much support for the `:nth-of-class` or the likes ( https://css-tricks.com/css-nth-of-class-selector/ shows one way in Safari) — qrsngky, Jul 11 '22 at 09:56

score 0 · Accepted Answer · answered Jan 04 '23 at 04:28

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.

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

1 Answers1