Basit Basit - 2 months ago 6
CSS Question

different padding, if next div has same class as previous

I want to give lower margin-bottom for siblings which has same class, except

:last-child


<style>
.text {
margin-bottom: 20px;
}
</style>
<div class="text"></div>
<div class="text"></div>
<div class="text myText"></div> <!-- margin-bottom this 5px; -->
<div class="text myText"></div> <!-- margin-bottom this 5px; -->
<div class="text myText"></div> <!-- margin-bottom this 20px; -->
<div class="text"></div>
<div class="text myText"></div> <!-- margin-bottom this 20px; -->
<div class="text"></div>

Answer

As CSS doesn't have previous or parent selector, you can use the margin-top by this way:

.myText + .myText {margin-top: 5px;}
.text:not(.myText) + .myText,
.myText + .text:not(.myText) {margin-top: 20px;}

div {border: 1px solid #99f;}

.text:not(.myText) + .myText:last-of-type,
.text:not(.myText) + .myText:last-of-type {margin: 0;}
<div class="text">No Bot Margin</div>
<div class="text">No Bot Margin</div>
<div class="text myText">margin-bottom this 5px;</div> <!-- margin-bottom this 5px; -->
<div class="text myText">margin-bottom this 5px;</div> <!-- margin-bottom this 5px; -->
<div class="text myText">margin-bottom this 20px;</div> <!-- margin-bottom this 20px; -->
<div class="text">No Bot Margin</div>
<div class="text myText">margin-bottom this 20px;</div> <!-- margin-bottom this 20px; -->
<div class="text">No Bot Margin</div>

This is the closest I can get you. Also it looks like your logic is not consistent.