jQuery - :not Selector

HTML

<!DOCTYPE html>
<html>
<head>
    <title>jQuery :not select test</title>
</head>
<body>
    <div class="dirty">
        <p class="dirty" height="10px">this is a dirty element</p>
  
    </div>
    <div class="dirty">
        <p class="dirty">this is a dirty element</p>
  
    </div>
    <div class="dirty">
        <p>this is a dirty element</p>
  
    </div>
    <p class="dirty">ss<span class="dirty">d</span></p>
</body>
</html>

CSS

.dirty{
 margin-bottom: 30px;   
 background: cyan;
}

.dirty1{
 margin-bottom: 30px;   
 background: magenta;
}

JavaScript

$(".dirty:not(.dirty .dirty)").css("border", "1px solid red");
//TO PROVE THIS WORKS COMMENTS THE LINE ABOBE AND UNCOMMENT THE ONE BELOW
//$(".dirty").css("border", "1px solid red");