[Edit]

CSS - display only last image in div

1 contributors

2 contributions

0 discussions

6 points

Created by:

Joann-Calderon

383

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; } with img:last-child { display: inline; }

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

Auto running

Where: display: inline can be replaced with any other values, e.g. block, flex, itp.

Practical example

Edit

xxxxxxxxxx
 
<!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>