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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With