Target the 2nd instance of a CSS Class

Question

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.

Answer 1

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 }