I'm having some trouble trying to change a property on the <a> tag when the first radio button is checked. It works fine when I want to change a <label> property when one is checked but not with the <a>
Can anyone help me out?
Changing color on inside when radio button is checked?
Asked
Active
Viewed 1,145 times
1 Answers
1
The + selector means there must not be any other elements coming between the two elements. The reason + label works is because your label comes immediately after your radio button. However, that label is standing between your radio button and the div, so #radio-one:checked + div won't work.
You need to use
#radio-one:checked + label + div a
Also see this answer for an illustration on how the + selector works.
-
Thanks! I was thinking the + could be used to affect any element in parallel.
– james
Jun 22 '12 at 16:27
-
@james: That would be `~`, but even then it doesn't affect elements occurring *before* another element, only after. Also, if you had an extra `div` after `#radio-two`, that would be changed by `#radio-one ~ div` unless you have a `#radio-two ~ div` in your CSS as well. It's quite confusing in words, though, so here's [another illustration](http://stackoverflow.com/questions/10737114/and-expressions-in-css/10737139#10737139).
– BoltClock
Jun 22 '12 at 16:27
-
Right okay thanks. Also the updated fiddle you made seems to change the color when either of the radio buttons are checked. Or rather when 'radio-one' is checked, it doesn't go back to the original when it becomes unselected. Any ideas?
– james
Jun 22 '12 at 16:30
-
@james: Uh oh. Looks like WebKit is bugging out. It works for me in other browsers, but I'm seeing the link stay red in Safari.
– BoltClock
Jun 22 '12 at 16:34
-
Hmm works fine in FF, I may have to use JavaScript instead to achieve the same effect.
– james
Jun 22 '12 at 16:37
Asked
Active
Viewed 1,145 times
1 Answers
1
The + selector means there must not be any other elements coming between the two elements. The reason + label works is because your label comes immediately after your radio button. However, that label is standing between your radio button and the div, so #radio-one:checked + div won't work.
You need to use
#radio-one:checked + label + div a
Also see this answer for an illustration on how the + selector works.
-
Thanks! I was thinking the + could be used to affect any element in parallel. – james Jun 22 '12 at 16:27
-
@james: That would be `~`, but even then it doesn't affect elements occurring *before* another element, only after. Also, if you had an extra `div` after `#radio-two`, that would be changed by `#radio-one ~ div` unless you have a `#radio-two ~ div` in your CSS as well. It's quite confusing in words, though, so here's [another illustration](http://stackoverflow.com/questions/10737114/and-expressions-in-css/10737139#10737139). – BoltClock Jun 22 '12 at 16:27
-
Right okay thanks. Also the updated fiddle you made seems to change the color when either of the radio buttons are checked. Or rather when 'radio-one' is checked, it doesn't go back to the original when it becomes unselected. Any ideas? – james Jun 22 '12 at 16:30
-
@james: Uh oh. Looks like WebKit is bugging out. It works for me in other browsers, but I'm seeing the link stay red in Safari. – BoltClock Jun 22 '12 at 16:34
-
Hmm works fine in FF, I may have to use JavaScript instead to achieve the same effect. – james Jun 22 '12 at 16:37