EN
CSS - display only first image in div
3
points
In this short article, we would like to show how to display only the first img element in the div element using CSS.
Quick solution:
Use
img { display: none; }withimg:first-child { display: inline; }
// ONLINE-RUNNER:browser;
<style>
div img {
display: none;
}
div img:first-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 examples
In the below examples, you can find multiple div container elements where for each one only first image is displayed.
Example 1
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div img {
display: none;
}
div img:first-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>
Example 2
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.container img.image+img.image
{
display: none;
}
</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>
Example 3
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.container img.image~img.image
{
display: none;
}
</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>