Clash Royale CLAN TAG#URR8PPP

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:

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

3 Answers
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>

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>

<div>

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>

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.