CODEWITHSUNDEEP
htmlcsscss-selectors
Mindexperiment
Mindexperiment

Reputation: 137

Css - Select label far from input

I'm looking for a selector that let me style a label that's not near the respective input

Html

<article>
 <header>
  <label for="view-today-node-0">VIEW</label>
 </header>

 <input type="radio" name="view-today-node" id="view-today-node-0" />
</article>

I need to style the label when the radio is checked.

Something similar to

article  input[type="radio"]:checked + label {}

but the label is not near the input

Upvotes: 1

Views: 758

Answers (3)

WackyWalrus
WackyWalrus

Reputation: 324

This might help. CSS alone won't be good for this, b4ttl3m4st3r was close I think. http://jsfiddle.net/a3v3x/

$("input[type='radio']").change(function(){
    var color = this.checked ? "#f00" : "#000";
    var id = $(this).attr('id');
    $("label[for='"+id+"']").css('color',color);
});

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10182

You can use the general sibling combinator (~) to style the label if it is not next to the input, but still a sibling:

input[type="radio"]:checked ~ label {
    color:green;
}

Here is a fiddle: http://jsfiddle.net/EPHXU/

Upvotes: 2

b4ttl3m4st3r
b4ttl3m4st3r

Reputation: 106

jQuery-Solution:

$("label[for='view-today-node']").css('background','#F00');

Upvotes: 1

Related Questions