I have a main element with nested children, some of which share a common CSS class.
My goal is to select the last child of the main element without selecting the last sub-child as well.
I have attempted two methods so far:
Using :last-child
.some-class:last-child {
background: lightblue;
}<div class="container">
<div class="some-class">one</div>
<div>
<div class="some-class">sub-one</div>
<div class="some-class">sub-two</div>
</div>
<div class="some-class">two</div>
</div>Using :last-of-type
.some-class:last-of-type {
background: lightblue;
} <div class="container">
<div class="some-class">one</div>
<div>
<div class="some-class">sub-one</div>
<div class="some-class">sub-two</div>
</div>
<div class="some-class">two</div>
</div>Currently, both methods highlight two and sub-two in blue. I only want two to be highlighted.