possible to style an element if the same class shows up after it?

Question

<div class="content">Content</div>
<div class="content">Content</div>

.content {
    padding: 5rem 2rem;
}

I know I could target the 2nd div by :nth-child(2) but I need to style it if it is only immediately after

The nth-child(2) won't work in this situation:

<div class="content">Content</div>
<div class="image"><img src="file.jpg"></div>
<div class="content">Content</div>

.content {
    padding: 5rem 2rem;
}

The reason I want to accomplish this is because the content has a top and bottom padding of 5rem, but when there are two next to each other (see first code block), I do not want to put a top padding on the second div, padding: 0 2rem 5rem 2rem; that way it does not have even more spacing.

Answer 1

Use an adjacent sibling selector.

.content + .content {
  padding: 0 2rem 5rem 2rem;
}