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
Alexander Fisher
4,943 PointsTask 2 of 2 Advanced Selectors: Psuedo, Target, Checked, Combinators
Having problems with selecting the Targets for radio type, and adding a combinator to select the radio type's sibling.
2 Answers
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 PointsYou can select elements with specific attributes by using the attribute selector:
[type="radio"] {}
There are two combinators for selecting siblings:
[type="radio"] + p {
// Selects any siblings that are paragraphs and come directly after a radio button
}
[type="radio"] ~ p {
// Select any siblings that are paragraphs and come after (but not necessarily directly after) a radio button
}
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points[type="radio"]:checked ~ label {
color: blue;
font-weight: bold;
}
1.) When you're using a psuedo class, you just attach it to the selector, just like "a:hover"—":hover" is a pseudo class.
2.) You can use ~ to get the label that is a sibling of—and directly follows—the checked radio button.
If you don't understand what is meant by a "sibling", consider this HTML:
<div class="wrapper">
<p>This is a paragraph</p>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="content">
<!-- ... -->
</div>
</div>
In that html, the "li" elements in the list are "children" of the "ul" element. They are also "siblings" of each other.
Likewise, the wrapper div is a "parent" of the "p", "ul" and content div elements and they are all siblings of each other.
Does that make sense?
Alexander Fisher
4,943 PointsYes that makes sense, thank you very much for your help. I found out that I was missing a comma after you help me figure out the correct combinator and order.
Thanks again!
Alexander Fisher
4,943 PointsAlexander Fisher
4,943 PointsHere is the actual problem in context: "Now, create an attribute selector that targets input elements with a type value of radio. In the same selector, add the :checked pseudo class, then use a combinator to target the label that is an immediate sibling of a radio button. Set the color to blue and the font weight to bold."
1.) When separating Pseudo Classes do I need to use commas? 2.) I'm having trouble determining the sibling of the radio button.
HTML Below: <!DOCTYPE html> <html> <head> <title>UI Element States Pseudo-Classes</title> <link rel="stylesheet" type="text/css" href="page.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form> <label>Name:</label> <input type="text"> <label>Phone:</label> <input type="text" disabled> <div> <input name="radio" id="radio1" type="radio"><label for="radio1">Option 1</label> <input name="radio" id="radio2" type="radio"><label for="radio2">Option 2</label> </div> <input type="submit" value="Submit"> </form> </body> </html>