Selecting nested elements with CSS

Question

I'm trying to select a specific element of a shared class, and I can't seem to figure out the best way to land on the specific entry of this element. I need to be able to hide the existing photo (pic2.jpg) and insert another (pic3.jpg) in the background as a replacement in the same space.

I've tried using nth-child selectors and tinkering with that but to no avail. I have also tried using multiple different classes as selectors but it seems to get hung up on which class I include in the selectors. My instinct tells me to do: #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>

It should allow me to move the existing image off screen to replace with another as a background image, however, the selector issue is of most importance.

Answer 1

I think I figured it out after some research. Looks like a specific attribute selector works really well here by just finding the exact image source with that specific value. Thank you for your help!