trying to solve css
so if I have
and I do
doing
would work but if I do
it doesn't work. why?? don't they both change the value of the variable?
32 Replies
"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
yaa ik that, but i just made a quick example xD
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.
you're right
here's a pen
hmm..but since it's a global var , shouldn't it affect everywhere?
yeah, it's definitely what Chris said
damn, and I thought i just solved the whole css ;-;
the global value is what's set in root, then that's overridden locally inside <div> by the
div:hoverh1 doesn't have the colour set to the variableaaah i see..
So changing the variable doesn't do anything for it
oh hey, that too!
what do you mean
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); setit has
--color : black;
So?
I think the intention might be that hovering over the h1 causes an effect on the h2
--color doesn't mean anything by itselfit's the same as the div
You need to assign it like the
spanthe h1 isn't supposed to change colors, the span is supposed to when you hover over h1
i thought it'll override the initial value of the root variable
yaa
No, it only overrides the scoped variable
the span was supposed to be effected or so I thought
okeey , makes sense
Variables are scoped to the element they're declared on. So the
h1 now has an unused variable --color.yaa i get it now
tnx ❤️
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 🤷i guess 😅
Yes, you could do it with :has
body:has(h1:hover) {And there's the 20% doubt! lawl
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