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

CSS

Posted by Kiwi Dave
Kiwi Dave
5,541 Points

last-child on a checkedbox

Hi there,

I have written the following code as I would like to add a margin to the last checked box

input[type="checkbox"]:last-child {
  margin-bottom: 0 4px 30px 0;
}

It just isn't working and I have tried last-of-type too. Any tips?

Thanks in advance, Dave

Kiwi Dave
Kiwi Dave
5,541 Points

I have also tried this... 

input[type="checkbox"]checkbox:last-child {
  margin-bottom: 0 4px 30px 0;
}

5 Answers

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

As Jonathan and Jason already said correctly, maybe last-of-type may be the better pseudo-class in your case. The problem you're experiencing is because you have no wrapper element around your inputs. Besides that even if you would have a wrapper around them the last input is also not the last element because there still is a label after it.

So if you write

input[type="checkbox"]:last-of-type {
  margin-left: 500px;
}

it should work. Here is the working example.

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

Hey Dave,

the selector is correct and should work like this. However you're giving the margin-bottom property 4 values which probably doesn't work.

<form>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</form>

input[type="checkbox"]:last-child {
  margin-left: 50px;
}

I just modified the property and changed it to margin-left and gave it a value of 50px so you can clearly see that it works. You can look at how this code looks in action here.

I hope that helps!

Kiwi Dave
Kiwi Dave
5,541 Points

Hi Tobias,

Thanks for your answer and I see it in action and it works. I have changed my margin values...thanks for pointing that out :) The weird thing is; my code still doesn't work.

My html code is:

<label>Select the Newsletter you would like to recieve</label>
            <input type="checkbox" id="html_news" value="newsletter_html" name="newsletter_html"><label class="light" for="html_news">HTML News</label><br>
             <input type="checkbox" id="css_news" value="newsletter_css" name="newsletter_css"><label class="light" for="css_news">CSS News</label><br>
            <input type="checkbox" id="javascript_news" value="newsletter_javascript" name="newsletter_javascript"><label class="light" for="javascript_news">Javascript News</label><br>

And the css is....

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 20px 0;
}

input[type="checkbox"]:last-child {
  margin-bottom: 500px;
}

The top bit of css is working fine...but the last childpart...nothing. Am I missing something here really obvious?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You have a mixture of siblings.

You can try :last-of-type

If that doesn't work then post more of the surrounding html up to the parent of these elements.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Would last-of-type not work better for you?

You're attempting to select the checkboxes but they're siblings not children of each other.

input[type="checkbox"]:last-of-type {
  margin-bottom: 500px;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

:last-child works on siblings too but they have to be of the same type. In this case there's a mixture of siblings.

All of the :nth-child related classes work on siblings so the names are a bit misleading.

Kiwi Dave
Kiwi Dave
5,541 Points
Kiwi Dave
Kiwi Dave
5,541 Points

Jonathan, Tobias and Jason,

Firstly thanks for all your help.

I changed it to last-of-type and it still didn't work....but...

I ended up wrapping a div around the HTML code and this got it too work. Why I don't know? But when you guys mentioned about a wrapper I just tried that.

I have no idea why adding a div made it work...but that is what it took. I am happy guy! So thanks!

If you guys happen to know why the div made it connect...let me know!

Thanks guys once again :)

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

No problem! I'm glad you got it working! :) The reason behind this is that both last-child and last-of-type select the last occurrence of an element within its container. Before you didn't have a container so the last-child/last-of-type pseudo-classes basically didn't know which container's last element they should target. If you now wrap a div around it this is the container so they can select the last element of it.

I hope that helps you understanding the problem you had! :)

Kiwi Dave
Kiwi Dave
5,541 Points
Kiwi Dave
Kiwi Dave
5,541 Points

It does! Thanks!