CODEWITHSUNDEEP
csscss-selectors
thatuxguy
thatuxguy

Reputation: 2528

Target the 2nd instance of a CSS Class

Due to the solution I am using, I only have limited CSS classes. I would like to know if there is a way I can target the 2nd class, when there are 2 classes of the same name.

I have 2 instances of media-link contained withing a DIV called item. I need to basically add additional styles to the 2nd instance of the class. However this is where the difficulty comes in... I can not add any additional code, or classes to the code! I know, not ideal but its down to the solution being used, not personal choice.

Example code:

<a href="#" class="media-link" style="display: block">
  <img src="images/ph-a.png" alt="" />
</a>
<a href="#" class="media-link">
  <img src="images/auth-2-100px.png" alt="" />
  <p class="author">Author: John Smith</p>
</a>

Thanks in advance for any suggestions, or solutions.

Upvotes: 41

Views: 54431

Answers (2)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

There are two pseudo-selectors that accomplish what you're looking for.

.media-link:nth-child(2) {
  // here style 
}

or

.media-link:nth-of-type(2){
  // here style
}

Upvotes: 53

Shailender Arora
Shailender Arora

Reputation: 7778

you can use nth-child pseudo classes for your requirement....

.media-link:nth-child(2) {
color:red;
}

Upvotes: 6

Related Questions