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>

and I do

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

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

doing

    div:hover {
      --color : black;
    }

    div:hover {
      --color : black;
    }

would work but if I do

    h1:hover{
       --color : black;
    }

    h1:hover{
       --color : black;
    }

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

32 Replies

Jochem•2y ago

"it doesn't work" is a bit vague. Make a codepen? also, I know this is just a quick example, but an h1 shouldn't come after an h2 like that. They should have a logical progression, and likely you should only have one per section

glutoniumOP•2y ago

yaa ik that, but i just made a quick example xD

Chris Bolson•2y ago

I believe that this is due to inheritance. The div:hover only changes the value of —color for itself and its children. As the h1 is outside of the div it is not affected.

Jochem•2y ago

you're right

glutoniumOP•2y ago

https://codepen.io/-bloop-/pen/gOBBNoG

Tahzib Ebad

CodePen

gOBBNoG

...

glutoniumOP•2y ago

here's a pen hmm..but since it's a global var , shouldn't it affect everywhere?

Jochem•2y ago

yeah, it's definitely what Chris said

glutoniumOP•2y ago

damn, and I thought i just solved the whole css ;-;

Jochem•2y ago

the global value is what's set in root, then that's overridden locally inside <div> by the div:hover

13eck•2y ago

h1 doesn't have the colour set to the variable

glutoniumOP•2y ago

aaah i see..

13eck•2y ago

So changing the variable doesn't do anything for it

Jochem•2y ago

oh hey, that too!

glutoniumOP•2y ago

what do you mean

13eck•2y ago

I mean in your CSS the h1 has no color set, so changing the --color doesn't matter Only the span has color: var(--color); set

glutoniumOP•2y ago

it has --color : black;

13eck•2y ago

So?

Jochem•2y ago

I think the intention might be that hovering over the h1 causes an effect on the h2

13eck•2y ago

--color doesn't mean anything by itself

glutoniumOP•2y ago

it's the same as the div

13eck•2y ago

You need to assign it like the span

Jochem•2y ago

the h1 isn't supposed to change colors, the span is supposed to when you hover over h1

glutoniumOP•2y ago

i thought it'll override the initial value of the root variable yaa

13eck•2y ago

No, it only overrides the scoped variable

glutoniumOP•2y ago

the span was supposed to be effected or so I thought okeey , makes sense

13eck•2y ago

Variables are scoped to the element they're declared on. So the h1 now has an unused variable --color.

glutoniumOP•2y ago

yaa i get it now tnx ❤️

13eck•2y ago

I'm 80% sure that you can't do what you want with CSS alone. I'm almost positive you need JS to detect the hover and apply the color change to the span. But I'm not that used to the new :has(), :not(), etc so there may be a way 🤷

glutoniumOP•2y ago

i guess 😅

Chris Bolson•2y ago

Yes, you could do it with :has body:has(h1:hover) {

13eck•2y ago

And there's the 20% doubt! lawl

Kevin Powell•2y ago

I was hoping to be the one to bring up :has() 🤣 @cvanilla13eck if you think it's not possible with CSS, you can probably do it with :has() now 😅 - it's unbelievably powerful... you can even count siblings/children and change layouts and stuff, it's wild! https://ishadeed.com/article/conditional-css-has-nth-last-child/#timeline (that goes to a pretty cool example within the article, but the entire thing is worth a read). Also, sorry for sort of going off topic, lol

Gaming

Programming

trying to solve css