Menu
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.
508
You use the general sibling selector (~) in combination with :hover . The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.)
Definition and Usage. The :nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-of-type() selector to select the element that is the nth child, of the same type (tag name), of its parent.
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 } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
