css selectors - CSS :not wont work as expected -

i want select elements doesn't have both .test , .test1 classes. following won't work.

ul li:not(.test.test1)  {      color:red;  }

<ul>      <li class="test test1">one..</li>      <li class="two">two</li>      <li class="three">three</li>  </ul>

this expected per mdn

"the negation css pseudo-class, :not(x), functional notation taking simple selector x argument."

unfortunately yours in not simple selector.

the css spec definition of simple selector is:

...an element matched particular aspect. type selector, universal selector, attribute selector, class selector, id selector, or pseudo-class simple selector.

unfortunately, compound selector has two classes.

@rounin has optimal solution here. above explanation why selector fails.