Try it Live - Scope of CSS Variable in id and class

​x
 
<!DOCTYPE html>
<html>
  <head>
    <title> scope of variable in id vs class selector </title>
    <style>    
     ul {
      border:var(--val-border, aqua);
      list-style-type:var(--val-list-style-type, disc);
     }
     
     #id1 {
      --val-list-style-type: circle;
      --val-border: 7px double orange;
     }  
     
     .cls1 {
      --val-list-style-type: square;
      --val-border: 5px solid blue;
     }
    </style>
  </head>
  <body>
   <p>--val-list-style-type and --val-border is defined at id level i.e. id1 as well as class level
      i.e. cls1 but the value of the id selector is displayed in output so it has higher priority than class</p>
    <b>Note:</b> The list type style will be circle and border will be  7px double orange
    <ul class="cls1" id="id1">
      <li>HTML</li>
      <li>CSS</li>
      <li>Java</li>
    </ul>    
  </body>
</html>
​