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

Question

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

I use a selector .item:not(.hidden):nth-child(n+10), but it does not work. When I use the selector as an example .item:not(.hidden):hover, it works.

This code example:

/********** 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>

Run codeHide result

I want too:

Why :nth-child(n+10)doesn’t it affect the whole choice, for example :hover? And how can I fix this?

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