Using `:not(:last-child)` on child elements won't skip the real last element

Using :not(:last-child) on child elements won't skip the real last element if there more not only the same class in the same parent.

Example shows that event I only give the margin-bottom: 5px to all .blue elements except the last .blue element, the last .blue element still has the margin-bottom: 5px styling.

Anyone knows how should I make this working or provide a documentation that explains how should I avoid this. Thanks in advance.

.blue,  .red {    background-color: #ccc;    padding: 5px;  }    .blue {    color: blue;  }    .red {    color: red;  }    .blue:not(:last-child) {    margin-bottom: 5px;  }

<div class="box">    <div class="blue">first blue text</div>    <div class="blue">blue text2</div>    <div class="blue">blue text3</div>    <div class="blue">blue text4</div>    <div class="blue">last blue text</div>    <div class="red">red text</div>    <div class="red">red text</div>  </div>

https://stackoverflow.com/questions/65571781/using-notlast-child-on-child-elements-wont-skip-the-real-last-element January 05, 2021 at 08:44AM