During my initial testing in jsFiddle, I encountered the following scenario: https://jsfiddle.net/6pqxfy2o/
$(function(){
console.log("fired");
$("div").each(function(){
console.log($(this).attr("class"));
console.log($(this).css("background-color"))})
}).color{
background-color:teal;
}
.dim{
width: 200px;
height: 200px;
}
.sub-dim{
width: 50px;
height:50px;
border: solid 1px white;
}
.ping {
background-color: cyan;
}
.ack {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dim color">
<div class="sub-dim ack">
</div>
<div class="sub-dim ping">
</div>
<div class="sub-dim">
</div>
</div>In testing, it became apparent that the inherited color was not being passed down to the children when the code was executed.
I am interested in finding out how to determine the background color of a sub-dim element that does not have its own background color, either by identifying the current color or by accessing the nearest one.
Ultimately, when iterating through sub-dim elements, I would like to retrieve [red, cyan, teal] or their respective color codes. In the provided example, the inner div is transparent, allowing the parent's color to show through.