Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 263
Basit Avatar asked Jul 02 '26 23:07

Basit


1 Answers

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.

like image 89
Praveen Kumar Purushothaman Avatar answered Jul 05 '26 14:07

Praveen Kumar Purushothaman