How do I suppress spacing between paragraphs of the same CSS class?

Question

What I'd like to do is make something like ...

<p class="A">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C">Line of class C</p>
<p class="D">Line of class D</p>

... turn out like:

Line of class A

Line of class B
Line of class B
Line of class B

Line of class C
Line of class C

Line of class D

I've messed around with margins and line-height and container divs but no combination has worked for me so far. Is this possible?

Mcavoy

I think you should accept Temani Afif's answer. It does exactly what you want. – Persia

Answer 1

I your elements will always be in sequence, You can simply do this:

.A ~ .A,
.B ~ .B,
.C ~ .C,
.D ~ .D{
  margin-top:-15px;
}

<p class="A">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C">Line of class C</p>
<p class="D">Line of class D</p>

Contradiction

THIS should be the accepted answer. I think the other answers miss the point. Of course you can put different spacing between groups of consecutive elements of the same class if you go through and identify the groups one by one and wrap them in <div>s or assign an additional class to the first and last of each group on a case-by-case basis, but that's not practical if, as in my case, you're dealing with ~20k lines of preexisting HTML with thousands of instances of the classes in question. I think this is what the OP had in mind, and certainly the solution I was looking for. – Persia

Answer 2

You are looking for a nth child selector based on a class. This is not possible with CSS3.

I recomend you this reading to understand the problem you're facing: https://medium.com/@MateMarschalko/css-select-nth-element-with-class-a313d080e2bf

But I think you should make it simple, you can wrap your <p> tags in a <div> tag and use it like this:

p {
  margin: 0;
  padding: 0;
}

div.a p:last-of-type,
div.b p:last-of-type,
div.c p:last-of-type,
div.d p:last-of-type{
  margin-bottom: 15px;
}

/* Or just div { margin-bottom: 15px; }*/

<div class="a">
  <p>Line of class A</p>
</div>
<div class="b">
  <p>Line of class B</p>
  <p>Line of class B</p>
  <p>Line of class B</p>
</div>
<div class="c">
  <p>Line of class C</p>
  <p>Line of class C</p>
</div>
<div class="d">
  <p>Line of class D</p>
</div>

Vardon

This would work, but I hesitate to have to add groups around every group of paragraphs - most of them are normal paragraphs that should have margins above and below. Thanks for the link! – Mcavoy

Answer 3

You could use javascript's getElementsByClassName() method for each class and then loop through the elements until you reach the final element of each class and then add a bottom margin to it.

An easier solution that doesn't require javascript would be to make a class that adds space after the element that it's applied to and then add that class to the final element of each class. Something like this:

.add-space {
  margin-bottom: 40px;
}

<p class="A add-space">Line of class A</p>
<p class="B">Line of class B</p>
<p class="B">Line of class B</p>
<p class="B add-space">Line of class B</p>
<p class="C">Line of class C</p>
<p class="C add-space">Line of class C</p>
<p class="D add-space">Line of class D</p>

Cowell

Answer 4

You can try wrapping the elements that share the same class then add margins to the wrappers.

p {
  margin: 0;
}
.add-space {
  padding-bottom: 20px;
}

    <div class="add-space">
      <p class="A">Line of class A</p>
    </div>
    <div class="add-space">
      <p class="B">Line of class B</p>
      <p class="B">Line of class B</p>
      <p class="B">Line of class B</p>
    </div>
    <div class="add-space">
      <p class="C">Line of class C</p>
      <p class="C">Line of class C</p>
    </div>
    <div class="add-space">
      <p class="D">Line of class D</p>
    </div>

Jitney