EN
CSS - display only last image in div
6
points
In this short article, we would like to show how to display only the last img element in the div element using CSS.
Quick solution:
Use
img { display: none; }withimg:last-child { display: inline; }
// ONLINE-RUNNER:browser;
<style>
div img {
display: none;
}
div img:last-child
{
display: inline;
}
</style>
<div>
<img src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
<img src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png" />
</div>
Where: display: inline can be replaced with any other values, e.g. block, flex, itp.
Practical example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.container img.image {
display: none;
}
div.container img.image:last-child
{
display: inline;
}
</style>
</head>
<body>
<div class="container">
<img class="image" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
<img class="image" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
<img class="image" src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png" />
</div>
<div class="container">
<img class="image" src="https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png" />
<img class="image" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
<img class="image" src="https://dirask.com/static/bucket/1631898942509-VMYrnXyYZv--image.png" />
</div>
</body>
</html>