I'm trying to achieve a unique effect where a label gets styled and a div gets revealed when a checkbox is checked. Surprisingly, I've managed to make one happen without the other in my attempts. Even though the CSS is consistent in both instances:
input {
display: none
}
.layerpic {
height: 100px;
width: 100px;
background: red;
opacity: 1;
float: left;
}
label {
clear: none;
float: left;
}
.xyz input:checked + .layerpic{
opacity: 0.5;
}
.xyz input:checked + label {
font-weight: bold;
}
In the first HTML example, the div is affected but not the label. The only variation is the order in which the label and input appear:
<div class ="xyz">
<label class="ribs" for="hider2">Hide layer</label>
<input type="checkbox" id="hider2">
<div class="layerpic"> hi
</div>
</div>
In the second HTML example, the label is affected but not the div:
<div class ="xyz">
<input type="checkbox" id="hider2">
<label class="ribs" for="hider2">Hide layer</label>
<div class="layerpic"> hi
</div>
</div>
I'm curious if there's an explanation as to why changing the order of elements impacts their effect, and whether it's possible to have both elements affected simultaneously when the checkbox is checked.