JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/q/33868689/258462

by Silviu Bogan

HTML

<div class="a">
    <span class="b">.a > .b</span> <!-- Why does this <span> element become red? -->
    <span class="a b">.a > .a.b</span>
</div>
<div>
    <span class="b">.b</span>
    <span class="a b">.a.b</span>
</div>

CSS

span {
    border: 0.1rem solid gray;
}

JavaScript

// This colors two of the <span> elements instead of one. It incorrectly colors the ".a > .b" <span>.
$(":not(.a) .b:not(.a)").css("color", "red");

// This call only colors the border of the ".b" <span> which is the correct behavior and should be the behavior of the call above.
$(":not(.a) > .b:not(.a)").css("border-color", "blue");