Looking to target a specific element within a shared class, I'm struggling to find the right method to pinpoint the exact entry of this element. What I need to do is hide the current photo (pic2.jpg) and replace it with another image (pic3.jpg) in the same spot.
I've experimented with nth-child selectors and various classes as selectors, but nothing seems to work. My initial thought was to use: #make Honda #make-image {display:none...}
<h1>...</h1>
<ul class="makes">
<li class="make Toyota">
<a href="#">
<img class="make-image" src="pic1.jpg">
<div class="make-info">
<img class="make-logo" src="pic1.png">
<h3 class="make-name">Can-Am®</h3>
<div class="clearall"></div>
</div>
</a>
</li>
<li class="make Honda">
<a href="#">
<img class="make-image" src="pic2.jpg">
<div class="make-info">
<img class="make-logo" src="pic2.png">
<h3 class="make-name">Honda</h3>
<div class="clearall"></div>
</div>
</a>
</li>
The goal is to slide out the existing image off-screen and introduce a new background image, but resolving the selector issue remains crucial.