JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<div class="ancestors">
    <div style="width:500px;">div (great-grandparent)
        <ul>ul (grandparent)
            <li>li (direct parent) <span>span</span>

            </li>
        </ul>
    </div>
    <div style="width:500px;">div (grandparent)
        <p>p (direct parent) <span>span</span>

        </p>
    </div>
</div>

CSS

.ancestors * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}

JavaScript

// traversing up the DOM parents() method

$("span").parents().css({"color":"red","border":"2px solid red"});