CODEWITHSUNDEEP
htmlcss
jn_lance
jn_lance

Reputation: 11

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

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 class="rank-content">
   <h2 class="rank-badge">test</h2>
</div>
<div class="rank-content">
   <h2 class="rank-badge">test</h2>
</div>
<div class="rank-content">
   <h2 class="rank-badge">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.

Upvotes: 0

Views: 311

Answers (3)

JayDev95
JayDev95

Reputation: 1104

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.

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

}

Upvotes: 1

SUBHADEEP SANGIRI
SUBHADEEP SANGIRI

Reputation: 11

You can also try this.

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

Upvotes: 0

Sokari Andrew-jaja
Sokari Andrew-jaja

Reputation: 11

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

Upvotes: 0

Related Questions