I have encountered the following scenario in my form, where an input
field has become nested inside parents:
<div class="form-input">
<div class="form-container">
<input id="check1" type="checkbox" />
</div>
</div>
<label for="check1">I am a label but not a sibling</label>
I want to target the label
that comes after the input
.
I want to target it depending on the checked
and focus
state of the input
.
Previously I was using the adjacent sibling selector like so:
[type=radio]:checked + label,
[type=radio]:not(:checked) + label {
// ...
}
[type=radio]:checked + label:before,
[type=radio]:not(:checked) + label:before {
// ...
}
However this isn't possible anymore because these two elements no longer have the same relationship.
Is this resolvable, and if so how do I refer to the label
after the input?
Aucun commentaire:
Enregistrer un commentaire