CSS Custom Variable overriding now working in child

Question

I am trying to test some custom variables overriding like seen in this video here: https://youtu.be/PHO6TBq_auI?t=546

I see in this video that simply overriding a custom variable in a .child element (that variable assigned to the "color" property of the body) will force the .child to change its color. But in my example, this doesn't happen. So basically, my code looks like this:

<html>
  <head>
    <style>
    
    :root {
      --maincolor: green;
    }
    
    body {
     
      color: var(--maincolor);
    }
    
    .main {
    
    }
    
    .child {
      --maincolor: red;
      /* color: var(--maincolor); */ only if I uncomment this, the collor of the text becomes red
    }
    
    
    
  </style>
  </head>
  
  <body>
    <div class='main'>
    
      <h2>
        Title X
      </h2>
      
      <div class='child'>
        Child text 1
      </div>
      
      <div class='child'>
        Child text 2
      </div>
      
    </div>
  </body>
</html>

My question is: why does the code in the video work?. Is there something I am missing? Or did the CSS specs change in the last few years? (the video is from 2017, but the codepen link in the description seems to be a bit different).

I also have the code here: https://codepen.io/ice13ill/pen/wvJEeoO

CSS Custom Variable overriding now working in child

0 Answers0