JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
        <div id="wrap">
            <div class="selector">
                <div class="foo">
                    <div class="baz">
                        <div class="selector">
Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
                        </div>
                    </div>
                </div>
            </div>
            <div class="bip">
              <div class="selector">
                Hello
              </div>
            </div>
        </div>
        <div class="selector">
          out
        </div>
    </body>
</html>

SCSS

#wrap {
  background-color: #f3f3f3;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}

.selector {
  background-color: rgba(green, .55);
  box-shadow: inset 0 0 0 4px gold;
  margin-bottom: 40px;
}

.cat {
  box-shadow: inset 0 0 0 6px purple;
}

JavaScript

//const dog = document.querySelectorAll('.selector').filter(node => !(node.closest('.selector')));

const dog = document.querySelectorAll('.selector');

(() => {
   dog.classList.add('cat');
})();