'What combinator selects each img in order to replace it?

<div id="about" class="tm-content-box">

  <ul class="boxes gallery-container">
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/000000/fff">
        <img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/0000ff/fff">
        <img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/00ff00/fff">
        <img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/ff0000/fff">
        <img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">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?

htmlcsscss-selectors


Solution 1:[1]

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" class="tm-content-box">

  <ul class="boxes gallery-container">
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Consult</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/000000/fff">
        <img src="https://dummyimage.com/50x50/000000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Design</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/0000ff/fff">
        <img src="https://dummyimage.com/50x50/0000ff/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Engineer</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/00ff00/fff">
        <img src="https://dummyimage.com/50x50/00ff00/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">Operate</h2>
    </li>
    <li class="box">
      <a href="https://dummyimage.com/50x50/ff0000/fff">
        <img src="https://dummyimage.com/50x50/ff0000/fff" alt="Image" class="img-fluid thumbnail box-img">
      </a>
    </li>
    <li class="box box-bg">
      <h2 class="tm-section-title tm-section-title-box tm-box-bg-title">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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mushroomator

Related Questions