Test Case Boilerplate

Fork this way...

HTML

<div id="firstDiv">
    <h2> This works </h2>
    <ul>
        <li class="class1">green</li>
        <li class="class2">green</li>
        <li class="class3">red</li>
    </ul>
</div>
<br/>
<div id="secondDiv">
    <h2> This works </h2>
    <ul>
        <li class="class1">green</li>
        <li class="class2">green</li>
        <li class="class3">red</li>
    </ul>
</div>
<br/>
<div id="thirdDiv">
    <h2> This DOESN'T work </h2>
    <ul>
        <li class="class1">green</li>
        <li class="class2">green</li>
        <li class="class3">red</li>
    </ul>
</div>
<br/>
<div id="fourthDiv">
    <h2> This works </h2>
    <ul>
        <li class="class1">green</li>
        <li class="class2">red</li>
        <li class="class3">red</li>
    </ul>
</div>

CSS

* {
    font-size: 12px;
    color: green;
}
h2 {
    font-size: 14px;
    color: black;
}

JavaScript

// this function select the <li> that is not of class1 or class2, and turn it into red color.  here I don't use a find function
$('#firstDiv >  h2 + ul > li:not(.class1, .class2)').css('color','red');

// same thing but using a find function. it works, it has a selector in find function not starting with a '+' and two selectors in :not filter
$('#secondDiv').find(' >  h2 + ul > li:not(.class1, .class2)').css('color','red');

// this one DOESN'T WORK because the selector in find function start with '+' and has two selectors in the :not filter
$('#thirdDiv > h2').find('+ ul > li:not(.class1, .class2)').css('color','red');

// this one WORKS. the find selector start with '+' and the :not filter has only one selector (.class1)
$('#fourthDiv > h2').find('+ ul > li:not(.class1)').css('color','red');