Imagine a scenario where you have HTML code like this:
<input type="checkbox" id='hello'>
<label for="hello"> hello </label>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
Along with the corresponding CSS:
ul {
display:none;
}
input[type='checkbox']:checked ~ul{
display:inline-block;
background-color:blue;
}
input[type='checkbox']:checked +label {
background-color:blue;
}
The goal is to have the label with the text 'hello' and the ul with a background color of blue when the checkbox is checked.
In the code provided, the :checked pseudo-class is used twice, once for ~ul and once for +label. Is there a way to combine these into a single :checked instance?