Apply style to wrapping <label> of checked checkbox

Viewed 1237

I have a <label> tag that wraps checkbox. I want to define a style to that label if the checkbox is checked. Until now I've been relying on JavaScript but I see that there is a :has selector that might do what I want with CSS only

Here is my HTML:

<label><input type="checkbox name="param1"> Param 1</label>

Here is what I'm attempting in CSS:

label:has(input[type='checkbox']:checked){
    background-color: #ccc;
}

However, it breaks my SCSS compiler before I even get to test it in a browser. I'm guessing that there is a CSS syntax error. My editor does highlight it as though there is an error, but I can't see where I've gone wrong.

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

2 Answers
Related