0

I know that CSS language changed a few in the last 10 years https://www.w3schools.com/cssref/css_selectors.php, wondering if now 2023, there's a possibility to change a property in a completely other location instead of the childrens or siblings inside a dom structure.

Example

<div id="a"></div>
<div>other stuff</div>
<div>
    <some various nesting>
        <div id="c"></div>
    </some various nesting>
</div>

Let's say I need to change #a from #c in this way

#c:hover #a {
    background-color: #ccc;
}

This would not work because #a ins't inside #c, there's a way to do it in pure css without having to use necessarly jquery or plain js? I would like to use a selector like if it was #c:hover getElementById("a") { ... }

I tried also:

#c:hover :root #a {
    background-color: #ccc;
}

with no success.

That would be very helpful finish stylizing lot of stuff that normally relies on javascript but there are many times where users disable javascript for security reasons.

user3450548
  • 183
  • 11
  • Nope. I suppose there might be a hacky method with some of the new selectors but it would be incredibly fragile. Javascript would be preferable. – Paulie_D Apr 01 '23 at 10:54

1 Answers1

1

You can use the CSS pseudo-class has()

#a:has(~ #c:hover) means: hover on #c and #c follows #a (not directly)

Here's a demo:

#a:has(~ #c:hover) {
  background: #ccc;
}
<div id="a">other stuff</div>
<p>
<div id="b">div in the middle</div>
<p>
  <div id="c">various nesting</div>

Supported browsers: https://caniuse.com/css-has

user2314737
  • 27,088
  • 20
  • 102
  • 114