如何从选择器中排除一个 div 元素和他的所有孩子？

Question

I wrote a script in jquery that adds class to all the elements on the page with the help of the selector * (all) . I would like to rule out one element of the div with all his children. I'm wondering how to do that. I tried to use a pseudo-class:not , including the mentioned div , but I don't know how to exclude his children as well. Can any of you help me solve this?

Code with pseudo-class:not

$(document).ready(function(){
   $('#yellow-background').click(function(){
      $(':not(div[aria-label="Slajder"])').addClass("yellow-background");
});

Normal code:

$(document).ready(function(){
   $('#yellow-background').click(function(){
      $('*').addClass("yellow-background");
});

Answer 1

ALL elements? Why not make a yellow overlay and show the div in the middle of that instead ?

Anyway

$("*:not('div[aria-label=Slajder] *')").addClass("yellow-background");

is harder to write than

$('*').not('div[aria-label="Slajder"] *').addClass("yellow-background");

due to quotes but both work

 $(function() { $('#yellow-background').click(function() { $('*').not('div[aria-label="Slajder"] *').addClass("yellow-background"); }); });

 .yellow-background { background-color: yellow } [aria-label=Slajder] { background-color: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="yellow-background">Yellow</button> <div>Content <div>content <div aria-label="Slajder"><h1>Slajder </h1> <div> exluded content <div>more exluded content</div> </div> </div> more content </div> </div>