Misunderstanding :not() behavior

by Brenton Strine

HTML

<div class="one">
one
<div class="two">
    two
    <div class="three">
       three 
    </div>
    two
    <div class="four">
        four
    </div>
    two
</div>

</div>
Everything should turn blue if you click anything except <code>.four</code>. If you click <code>.four</code>, nothing should happen. Right?

CSS

div { padding: 5px; border: solid 1px #ccc;}

.pretty { background: lightblue;}

JavaScript

$("html").one("click", ":not('.four')", function(e){
   e.stopPropagation();//this never fires when `.four` is clicked, see?
    
   console.log("Something without class 'four' was clicked that had class: " + $(e.srcElement).attr("class") );
    $(".one").addClass("pretty");
});