JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="class1 class2">Class0 Class1</li>
    <li class="class1 class2">Class0 Class2</li>
    <li class="class1 class2">Class1 Class2</li>
    <li class="class1 class3">Class1 Class3</li>
    <li class="class1 class4">Class1 Class4</li>
    <li class="class2 class3">Class2 Class3</li>
    <li class="class1 class4">Class1 Class4</li>
</ul>

<input type="button" value="Run querySelector function" id="runquery-button" />

CSS

#runquery-button {
   padding: 6px;
}

JavaScript

function runQuery() {
    var classOne = document.querySelectorAll( '.class1:not(.class2)' );
    for( var i = 0; i < classOne.length; i++ ) {
        classOne[i].style.backgroundColor = "#d1d1d1";
    }
}

var getButton = document.getElementById( 'runquery-button' );
getButton.addEventListener( 'click', runQuery, false );