Nth-of-type ignored classes

So I have this html

<div>
    <div class="item"></div>
    <div class="item inactive"></div>
    <div class="item inactive"></div>
<div>

And this css

 .item.inactive:nth-of-type(1) {
     do stuff for 1st inactive
 }
 .item.inactive:nth-of-type(2) {
     do stuff for 2nd inactive
 }

but it's not working as expected.

Instead I see this behavior

 .item.inactive:nth-of-type(2) {
     stuff is happening for 1st inactive
 }

so is it just ignoring when I specified .inactive? How would I get the effect I want?

.item {
  color: red;
}

.item.inactive:nth-of-type(2) {
  color: green;
}

<ul class='item-list'>
  <li class='item'>item 1</li>
  <li class='item inactive'>item 2</li>
  <li class='item inactive'>item 3</li>
<ul>