JSFiddle - React, Tailwind, and code Playground

HTML

<div id="root-component" class="script-component">a0
            <div></div>
            <div class="component">a2</div>
            <div class="script-component">b
                <div class="component">b1
                    <div class="script-component">c
                    </div>
                    <div class="component">b2
                    </div>
                </div>
            </div>
            <div class="component">a3</div>
            <div class="component">a4</div>
            <div>            
                <div class="component">a5</div>
            </div>
            <div class="component"> a6            
                <div class="component">a7</div>
            </div>
            <div class="component">a8
                <div class="script-component"></div>
            </div>
</div>

CSS

div {
    margin-left: 30px;
}

JavaScript

// The b2 element is still selected so it is not yet correct
$('#root-component').find(':not(.script-component) .component, >.component').css("color", "red");