CSS pseudo-class: tested for parents
You can apply a pseudo-class to a child element.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
How do I apply this pseudo class to a member or parents? For example, for a DIV element? How can I write my CSS code? My inputs are already "checked" on page load, so I just need to add the styling.
<div>
<label for="ossm">
<input type="checkbox" id="ossm" name="ossm" checked>
</label>
</div>
source to share
The current draft CSS Selectors Level 4 proposes a relational pseudo-class:has()
, so this should be possible in the future:
div:has(> label > input[type=checkbox]:checked) {
/* ... */
}
However, no browser supports this pseudo-class selector since the time of writing.
It is currently not possible to "select an ancestor element" with CSS alone. Currently, you will need to continue using the selector or use JavaScript to listen for events change
on this checkbox and select its ancestor element.
source to share