:not pseudo class not working with more than one element

Question

I have a list of elements and I want to apply some changes to all the elements, except the 9 and 11, so I write something like:

.myList li:not(:nth-child(9)),
.myList li:not(:nth-child(11)) {
  background-color: greenyellow;
}

<ol class="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
  <li>Thirteen</li>
  <li>Fourteen</li>
</ol>

This code applies the changes to all the <li> without exceptions, but it works if I put only one! like this: (this way applies the changes to all except the 9)

   .myList li:not(:nth-child(9)) {
      background-color: greenyellow;
   }

How can I put two or more different siblings numbers with the :not pseudo class in my code?

Answer 1

The reason why .myList li:not(:nth-child(9)), .myList li:not(:nth-child(11)) applies to all the elements, is because 9 and 11 are both in at least 1 condition.
The the 9th is not the 11th child so the css applies and vice versa

In you case, you simply want to do

.myList li:not(:nth-child(9)):not(:nth-child(11)) {
    background-color: greenyellow;
}

So that it selects anything that is not 9th or 11th