38 replies

trying to solve css

so if I have

  <div>
    I work fine
    <h2>
      <span>
        I'm effected
      </span>
    </h2>
  </div>
  
  <h1>I don't work fine</h1>

  <div>
    I work fine
    <h2>
      <span>
        I'm effected
      </span>
    </h2>
  </div>
  
  <h1>I don't work fine</h1>

  <div>
    I work fine
    <h2>
      <span>
        I'm effected
      </span>
    </h2>
  </div>
  
  <h1>I don't work fine</h1>

  <div>
    I work fine
    <h2>
      <span>
        I'm effected
      </span>
    </h2>
  </div>
  
  <h1>I don't work fine</h1>

and I do

 :root{
      --color : red;
    }
    
    span{
      color : var(--color);
    }

 :root{
      --color : red;
    }
    
    span{
      color : var(--color);
    }

 :root{
      --color : red;
    }
    
    span{
      color : var(--color);
    }

 :root{
      --color : red;
    }
    
    span{
      color : var(--color);
    }

doing

    div:hover {
      --color : black;
    }

    div:hover {
      --color : black;
    }

    div:hover {
      --color : black;
    }

    div:hover {
      --color : black;
    }

would work but if I do

    h1:hover{
       --color : black;
    }

    h1:hover{
       --color : black;
    }

    h1:hover{
       --color : black;
    }

    h1:hover{
       --color : black;
    }

it doesn't work. why?? don't they both change the value of the variable?