mercredi 18 mai 2016

Relatively targetting the label of an input who aren't siblings of one another

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