Select middle elements with different classes from css - html

Question

I am stuck in an issue where I want to select divs having specific classes within other divs. I want to target middle element with "active" class. In this case the third div with "active" class
I tried using .container .active:nth-child(3) but it is not working. Please help
.container .active:nth-child(3) {
background-color: red;
}
.container .active:nth-of-type(3) {
background-color: red;
}
<div class="container">
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item active">Active but highlighted</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
</div>

Answer 1

The :nth-of-type() actually only accounts for the type of element, not the type of class. This is the best solution I can think of right now, I'll update if I figure out a better way:
.container :is(.active + .active + .active):not(.active + .active + .active + .active) {
background-color: red;
}
<div class="container">
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item active">Active but highlighted</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item active">active</div>
<div class="item">abc</div>
<div class="item">abc</div>
<div class="item">abc</div>
</div>