Applying styles to the child of an adjacent sibling

Question

I'm attempting to resize images in a row with CSS, based on how many images are in the same row. For example, if there are four img elements in the same p, they are styled a certain way. Here is the working code, based on this answer:

HTML:

<p>
  <img src="preview.png">
  <img src="preview.png">
  <img src="preview.png">
  <img src="preview.png">
</p>

CSS:

.post-content p img:first-child:nth-last-child(4),
.post-content p img:first-child:nth-last-child(4) ~ img {
    width: 25%; /* fallback for browsers that don't support calc */
    width: calc((100% / 4) - 0.8%);
    margin-left: calc(1%);
}

.post-content p img:first-child:nth-last-child(4) { /* First image in group of four */
    margin-left: 0;
}

The result looks like this:

However, this does not work for images wrapped in a tags, but with the rest of the formatting identical, like this:

<p>
  <a href="#"><img src="preview.png"></a>
  <a href="#"><img src="preview.png"></a>
  <a href="#"><img src="preview.png"></a>
  <a href="#"><img src="preview.png"></a>
</p>

I am unable to find a solution in this case. Any help would be much appreciated.

Answer 1

The :nth-child()'s, :first-child's, and sibling selector need to be based off of the a tags, since those are the children and siblings, then the selectors should end with img to target the CSS property of the image.

p a:first-child:nth-last-child(4) img,
p a:first-child:nth-last-child(4) ~ a img {
    width: 25%;
    width: calc((100% / 4) - 0.8%);
    margin-left: calc(1%);
}

p a:first-child:nth-last-child(4) img {
    margin-left: 0;
}

<p>
  <a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a>
</p>