JSFiddle - React, Tailwind, and code Playground

HTML

<div class="not-ancestor">
    <input type="text" value="don't select this" />
    <input type="text" value="don't select this" />
    <input type="text" value="don't select this" />
    <input type="button" value="button" />    
</div>
<div class="not-ancestor">
    <div class="asdf">
        <div class="qwer">
            <input type="button" value="button" />
            <input type="text" value="don't select this" />
            <input type="text" value="don't select this" />
            <input type="text" value="don't select this" />
    </div>
    </div>
</div>
<div class="ancestor">
        <div>
            <input type="text" value="select this" />
            <input type="text" value="select this" />
        </div>
</div>

CSS

div{
    margin:5px;
}
.parent{
margin:25px;
}

JavaScript

$(document).ready(function(){
    $("div > input[type='text']").filter(function() {
        return !$(this).closest('.not-ancestor').length;
    }).css('color', '#FF1200');
});