Q: How do I suppress spacing between paragraphs of the same CSS class? 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?

A: 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>



A: 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>



A: 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>



A: 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>


