CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes Element States Pseudo-Classes

Sam Weeks
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

Bit 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
Steven Parker
207,983 Points

Here's a few issues I spotted in the unformatted code:

  • a CSS comment should start with "/*" (and end with "*/")
  • none of the label elements 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. :arrow_heading_down:   Or watch this video on code formatting.

Sam Weeks
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points

Steven 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