What combinator selects each img in order to replace it?-CodePudding

<div id="about" >

  <ul >
    <li >
      <h2 >Consult</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/000000/fff">
        <img src="https://dummyimage.com/50x50/000000/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Design</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/0000ff/fff">
        <img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Engineer</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/00ff00/fff">
        <img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Operate</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/ff0000/fff">
        <img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Optimize</h2>
    </li>
  </ul>
</div>

What combinator selects each img with a class "box-img" in order to replace each with another?

#about .box-img:nth-child(1){
background-image: url(../img/img-1.jpg);}

But it doesn't work. Could it be the resolution of the images? The original ones are 250 × 250 and the ones I want to replace with are 600 × 400. Is there a way to replace each image using only CSS?

CodePudding user response：

You should just use JavaScript to update the src attribute instead. Here a short script that will change all images to another after two seconds.

window.addEventListener("DOMContentLoaded", (e) => {
  const imgs = document.querySelectorAll("#about .box-img:nth-child(1)");
  const newImage = "https://dummyimage.com/100x100/ff00ff/000000&text=Changed"
  // set image to another one after two seconds
  setTimeout(() => {
    imgs.forEach(img => img.setAttribute("src", newImage))
  }, 2000)
});

<div id="about" >

  <ul >
    <li >
      <h2 >Consult</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/000000/fff">
        <img src="https://dummyimage.com/50x50/000000/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Design</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/0000ff/fff">
        <img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Engineer</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/00ff00/fff">
        <img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Operate</h2>
    </li>
    <li >
      <a href="https://dummyimage.com/50x50/ff0000/fff">
        <img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" >
      </a>
    </li>
    <li >
      <h2 >Optimize</h2>
    </li>
  </ul>
</div>

As you can see different image sizes do not hinder you from doing this. You could obviously adjust the logic to do more complicated (yet simple) stuff than replacing all images with the same image but the principle remains the same.