JSFiddle - React, Tailwind, and code Playground

by broofa

HTML

<html>   
    <body>
        <div id="diva">
            <div id="divb">
               <div id="divc">
                   Hello
                </div>
            </div>
        </div>
    </body>
</html>

CSS

body {
    background-color: white;
}
div {
    border: solid 2px black;
    background-color: inherit;
    border-color: inherit;
    
    min-width: 10px;
    min-height: 10px;
    margin: 8px;
    display: inline-block;
}
#diva {
    background-color: red;
}
#divb {
    border-top-color: green
}

JavaScript

function cssPropertyParent(target, property) {
    var initialVal = target.css(property);
    while (target.length > 0) {
        var parent = target.parent();
        if (parent.length > 0) {
            var parentVal = $(parent).css(property);
            if (parentVal != initialVal) break;
        }
        target = parent;
    }
    return target;
}

var child = $('#divc');
console.log ('#divc gets background-color from', cssPropertyParent(child, 'background-color')[0]);

console.log ('#divc gets border-top-color from', cssPropertyParent(child, 'border-top-color')[0]);