Target div with less than 4 images (or children)

Question

I have some HTML created by wordpress generated data that basically shows images within a div.

I want the following if possible;

If div has less than 4 images - only show the first image in the div! Here is the example HTML generated;

 <div class="display-block">
 <img src="image">
 <img src="image">
 <img src="image">
 <img src="image">
 </div>

 <div class="display-block">
 <img src="image">
 <img src="image">
 <img src="image">
 </div>

So based on the above, the first display-block div will show all its children images, but the second one which only has 3 children images, will only show the first image.

This is basically so i can fill a thumbnail equally visually.

Here is a screenshot also so you can see what I mean;

So, the first block 'productivity' only has two images and doesn't fill the its container nicely. This is what i want to target like so

This div has less than 4 images, so hide all but the first one and make it fill it's container which I can do by changing image max width. The second block 'code snippets' only has 1 image and fill's it's container nicely because I was able to target this with the only-child selector.

And then the 3rd block 'website design inspiration' has 4 or more images, so it pulls the first 4 and fills its' container nicely.

Answer 1

Assuming that the maximum number of <img> elements in a <div> element will be four, the following CSS should serve your needs:

img {
  /* hiding all images by default: */
  display: none;
}

/* Showing the first <img> element (if
   it's also the first child of its
   parent): */    
img:first-child,

/* Selecting the image which is the
   fourth-last-child of its parent
   element, and from there selecting
   all <img> elements which follow: */
img:nth-last-child(4)~img {
  display: inline-block;
}

div.display-block {
  margin-bottom: 1em;
}

img {
  box-shadow: 0 0 3px 1px limegreen;
  height: 4em;
  width: 2em;
  /* using opacity, rather than
     'display: none' in order that
     you can easily see which
     <img> elements are selected */
  opacity: 0.2;
}

img:first-child,
img:nth-last-child(4)~img {
  opacity: 1;
}

<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">
  <img src="image">


</div>


<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">


</div>

JS Fiddle demo.

With regard to the comment to another question:

…now [I] need to make the first [image's] width change to fill the box…

Given that requirement, all you really have to do is define width: 100%, but bear in mind that this will also cause overflow on those <div> elements with the four <img> elements showing, so you would need to define scrolling behaviour, such as overflow-x: auto:

div.display-block {
  margin-bottom: 1em;
  /* my assumption is that you're wanting a
     horizontal carousel, therefore I'm
     forcing the <img> elements to be on the
     same 'line' of the parent element: */
  white-space: nowrap;

  /* allowing the browser to decide whether
     a scroll bar is necessary: */
  overflow-x: auto;
  width: 80%;
  margin: 0 auto;
  border: 2px solid #000;
}

img {
  box-shadow: 0 0 3px 1px limegreen;
  /* setting the width of the <img>
     elements to 100% of the width
     of the parent; here we set only
     the width so as to allow the
     browser to maintain the image's
     aspect ratio: */
  width: 100%;
  /* hiding the <img> elements by
     default: */
  display: none;
}

img:first-child,
img:nth-last-child(4)~img {
  /* displaying the <img> elements
     matching the above selectors: */
  display: inline-block;
}

div.display-block {
  margin-bottom: 1em;
  white-space: nowrap;
  overflow-x: auto;
  width: 80%;
  margin: 0 auto;
  border: 2px solid #000;
}

img {
  box-shadow: 0 0 3px 1px limegreen;
  width: 100%;
  display: none;
  background-color: #f90;
}

img:first-child,
img:nth-last-child(4)~img {
  display: inline-block;
}

<div class="display-block">

  <img src="http://lorempixel.com/300/300/nightlife/1">
  <img src="http://lorempixel.com/200/300/nightlife/2">
  <img src="http://lorempixel.com/300/200/nightlife/3">
  <img src="http://lorempixel.com/500/500/nightlife/4">


</div>


<div class="display-block">

  <img src="http://lorempixel.com/300/300/nature/1">
  <img src="http://lorempixel.com/300/300/nature/2">
  <img src="http://lorempixel.com/300/300/nature/3">


</div>

JS Fiddle demo.

References:

• CSS:
  • :first-child.
  • General-sibling combinator (~).
  • :nth-last-child().

Answer 2

There is probably a more compact way of doing this but this works:

$(document).ready(function(){
$(".display-block").each(function(){
    if ($(this).find("img").length <4)
    {
       $(this).hide();
    }
    else
    {
       $(this).show();
    }
  })
});

Another more compact way:

$(document).ready(function(){
    $(".display-block").hide();
    $(".display-block img:nth-child(4)").each(function(){
        $(this).closest(".display-block").show();
    });
});

Answer 3

You need to loop through every div with class .display-block and check if count of children is less than 4. if so, then hide every child other than first :) Look at this code:

$(".display-block").each(function() {
  if($(this).children().length < 4) {
    $(this).children(":not(:first-of-type)").fadeOut(0);
  }
});

---

You can also look at the final example here:

$(".display-block").each(function() {
  if ($(this).children().length < 4) {
    $(this).children(":not(:first-of-type)").fadeOut(0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">
  <img src="image">


</div>


<div class="display-block">

  <img src="image">
  <img src="image">
  <img src="image">


</div>