How to exclude class in CSS selector with nth-child?

Question

I want to change the background color of elements coming after the 9th with :nth-child(n+10), bypassing some elements that are already hidden with display: none.

I am using .item:not(.hidden):nth-child(n+10) selector but it is not working. When I use as an example .item:not(.hidden):hover selector, it is working.

This sample code:

/********** just for ex. **********/
body {
  background-color: #333;
}
.item {
  height: 20px;
  width: 80%;
  background-color: #aaa;
  margin-bottom: 10px;
  color: #fff;
  padding-left: 20px;
}
/********** just for ex. **********/


.hidden {
  display: none;
}

.item:not(.hidden):hover {
  background-color: #00f;
}

.item:not(.hidden):nth-child(n+10) {
  background-color: #f00;
}

<ol>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item hidden">3</li>
  <li class="item">4</li>
  <li class="item hidden">5</li>
  <li class="item">6</li>
  <li class="item">7</li>
  <li class="item hidden">8</li>
  <li class="item">9</li>
  <li class="item">10</li>
  <li class="item hidden">11</li>
  <li class="item">12</li>
  <li class="item hidden">13</li>
  <li class="item">14</li>
  <li class="item">15</li>
  <li class="item">16</li>
  <li class="item">17</li>
</ol>

And I want:

Why :nth-child(n+10) does not affect the entire selection like :hover? And how can I fix it?

JS Bin: http://jsbin.com/qahaxihoja/edit?html,css,output