CSS how to select element with specific class inside div with same the class except the first one-CodePudding

I am trying to get an h2 element with a specific class name inside divs with the same class name except the first one. here is the structure:

<div >
   <h2 >test</h2>
</div>
<div >
   <h2 >test</h2>
</div>
<div >
   <h2 >test</h2>
</div>

I am trying to change css appearance of all rank badge except from the the first .ranked-content. I've tried this one but it changes all rank-badge h2:

.ranking-content:not(:first-child) .rank-badge {

}
.ranking-content:not(:nth-child(1)) .rank-badge {

}

any ideas? thanks in advance.

CodePudding user response：

You are calling .ranking-content and that isn't the name of the class you have in your HTML.

The name in the class attribute is rank-content.

This is how you should call it in your CSS. Let me know if you have any questions! :)

.rank-content:not(:first-child) .rank-badge {

}

CodePudding user response：

Have you attempted to create a unique class variant for your first rank-badge class such as rank-badge 2 ?

CodePudding user response：

You can also try this.

.rank-content:not(:first-of-type) .rank-badge {
 
}