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

Question

<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?

Answer 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.