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
Sam Weeks
Front End Web Development Techdegree Student 16,699 PointsBit Confused with first and last child with attribute selectors
So I want to target the checkboxes specifically. I was trying to experiment as if i were to go back and add more items at a later stage, how could I keep the design the same using last and first child (more trying to get my head round how these pseudo classes work regarding attribute selectors). if you could help explain where i'm going wrong that would be ace. (also i haven't figured out how to add code in here yet so i apologise )
<!--HTML HERE--> <label>Interests:</label>
<input type="checkbox" id="development" name="user_interest"><label for="development">Development</label><br>
<input type="checkbox" id="design" name="user_interest"><label for="design">Design</label><br>
<input type="checkbox" id="business" name="user_interest"><label for="business">Business</label><br>
<label for="msg">Message:</label>
<textarea id="msg" rows="4"></textarea>
<input class="btn default" type="submit" value="Submit">
/CSS HERE */ / UI element states pseudo-classes ------------ */
input:focus, textarea:focus { border-color: #52bab3; }
input:disabled { background: #ddd; }
input[type="checkbox"]:checked + label:last-of-type { font-weight: bold; }
label[type="checkbox"]:last-child { color: red; }
label[type="checkbox"]:first-child { color: red; }
2 Answers
Steven Parker
231,275 PointsHere's a few issues I spotted in the unformatted code:
- a CSS comment should start with "
/*" (and end with "*/") - none of the
labelelements have a type of "checkbox" - none of the checkbox labels is the last of type (the last-of-type label says "Message:")
It wasn't entirely clear what you were intending, but perhaps these examples will help:
/* make the label of any checked input show in bold */
input:checked + label { font-weight: bold; }
/* color the label for the first input */
input:first-of-type + label { color: red; }
/* color the label of the "business" checkbox */
label[for="business"] { color: red; }
I wasn't able to get the "first/last-of-type" pseudo-class selectors to work with the attribute selectors. It seems that the attribute selector doesn't contribute to the identification of "type" and just acts as qualifier. This might be a bug, but I haven't confirmed it in the specs. But you could put the boxes and labels in an enclosing element and then use the nth-of-type pseudo-classes directly on the labels.
And when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. 
Sam Weeks
Front End Web Development Techdegree Student 16,699 PointsSteven Thank you for taking the time to reply with such an awesome answer, I'll take a look at all of this now thank you. I did work out however that nth-of-type worked as you mentioned after a little while. I was just experimenting and trying to get my head around the concepts more than anything.
Thanks again
Sam