<html>
  <style>
    .blue-text {
      --color: blue;
    }
    .red-text {
      --color: red;
    }
    .my-text {
      color: var(--color);
    }
  </style>
  <body>
    <div class="blue-text">
      <div class="my-text">This will be blue</div>
      <div class="red-text">
        <div class="my-text">
          This will be red (even though it's within the blue-text div, the
          red-text is more specific).
        </div>
      </div>
    </div>
  </body>
</html>

<!-- https://kentcdodds.com/blog/super-simple-start-to-css-variables -->
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.