Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Muhammad Haris Khan
8,587 PointsWhy i have to add + label after :enabled to see the results?
The syntax on https://developer.mozilla.org/en-US/docs/Web/CSS/:checked tells that i can use :
element:checked { style properties }
and see the results, but from the downloaded project files i have to add +label to see the effect, :checked only does not work.
That means whenver i use :checked i have to use +lable to see that checked radio button has the effects i like when its enabled?
Hope my question is clear
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Muhammad,
In this video Guil wanted to apply the font-size and weight to the label adjacent to the radio input that is checked.
He didn't want to apply the styles directly to the checked radio input which is why he didn't use input:checked by itself.
The goal was to target the label.
When you see him click on a radio button in the video you see the label becomes bold and a larger font size, nothing happens to the radio button itself.
Muhammad Haris Khan
8,587 Pointsok so he was targeting the text next to the radio button in the html structure, is that what you mean?
Jason Anello
Courses Plus Student 94,610 PointsYes, that's correct.
The example had some html like this:
<input name="radio" id="radio1" type="radio"><label for="radio1">Option 1</label>
Guil wanted to target that label element with the text "Option 1" which followed the radio input.
You can certainly target the radio inputs for certain styling as shown in the MDN page you linked to but in this particular example the goal was to target the labels.