<html>
 <head>
 </head>
 <body>
   <div class="outer-div">
     <div class="text-color">White Text</div>

     <div class="inner-div">
       <div class="text-color">Black Text</div>
     </div>
   </div>
 </body>
</html>
.outer-div,
.inner-div {
    margin: 5px;
    border: 1px solid #333;
    border-radius: 3px;
}

.outer-div {   
    --some-color: black;
}

.inner-div {
    background: #000;
    --some-color: white;
}

.text-color {
    color: var(--some-color);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.