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.