how can I target element:checked to an element in another parent

Question

Hello everyone I'm a beginner trying to get better at css. How can you target an element from another div in events like hover, checked, etc.

see example of what I mean below:

<div>
<input type="checkbox">
</div>


<div>

<button>example</button>

</div>

input:checked /how do I target button/{
background-color:#f0f0f0;
}

I learned that I can target sibling with ~ example /if they were siblings/

input:checked ~ button {
background-color:#fefefe;
}

how can I do similar on elements from different parents.

You can't target element from other parents using css, you can use javascript to do that. — Abdelrahman, Jun 01 '23 at 04:25
:has can help in such situations, but not all browsers support it by default yet (notably Firefox). — A Haworth, Jun 01 '23 at 04:38

Carsten Massmann · Answer 1 · 2023-06-01T04:42:09.713

To my knowledge this is only possible with a little JavaScript. Here is one way of doing it:

document.querySelectorAll("[type=checkbox]").forEach(cb=>cb.onchange=ev=>
ev.target.closest("div").nextElementSibling.querySelector("button").style.backgroundColor=ev.target.checked?"red":"")

div {background-color:#ddd; margin:6px}

<div>first div <input type="checkbox"></div>
<div>second div text <button>example</button></div>
<div>third div <input type="checkbox"></div>
<div>fourth div text <button>example</button></div>

The onchange event handler is defined for each checkbox in the document. Whenever its status changes the event handler will start traversing the DOM structure up to the closest parent that is a div. It will then try to find the immediately following "ElementSibling" and select the first "button" element in it. For this element the background colour is then changed, according to the status of the changed checkbox.

The script is still in a "quick and dirty" stage and does not yet provide suitable responses in case the querySelector() should not come up with a DOM element as a result.

how can I target element:checked to an element in another parent

1 Answers1