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

samiff
samiff
31,206 Points
Posted by samiff
samiff
31,206 Points

CSS Child Selector

Using this webpage, I'm trying to figure out how to add some extra margin to the last paragraph of content.

What I thought would work doesn't seem to catch:

#box_1 > p:last-child {
     margin-bottom: 50px;
}

In my mind, this should target the last p element, directly located under #box_1 div. I feel like I'm missing something really silly here.

9 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Long Answer:

In Plain English #box_1 > p:last-child means find any element that meets the following conditions:

  1. is the last child of it's parent
  2. is a paragraph

Such an element does not exist, because looking at the markup it turns out the box_2 div is in fact the last child of the box_1 div.

Try this selector instead:

#box_1 > p:last-of-type

In Plain English, this will select the last paragraph that is a child of the box_1 div.

Here's the codepen example.

If you want to learn more about the last-of-type selector check out the structural pseudo-classes video which is part of the CSS Foundations - 2nd Edition course.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

As an aside, personally I prefer learnlayout.com over that A List Apart article. As learnlayout.com is by far the best explanation of CSS layout & positioning I've ever seen.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Sam -

Short Answer: Use p:last-of-type instead of p:last-child because the box_2 div is in fact the last child of box_1.

samiff
samiff
31,206 Points
samiff
samiff
31,206 Points

So to triple clarify, p:last-child translated means it's trying to select the last child element (which is actually the box_2 div), which also has to be a p element?

I suppose I screwed up, not reading the selector exclusively from right to left.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Sam -

I suppose I screwed up, not reading the selector exclusively from right to left.

I think you hit the nail on the head.

I sometimes think of this as reading from the from the inside out, given the nested nature of HTML markup.

jeff creamer
jeff creamer
23,733 Points
jeff creamer
jeff creamer
23,733 Points

@JB, Thanks for that learnlayout.com reference; looks a little more plainspoken and exhaustive than some of the other online ones I've checked out so far.

samiff
samiff
31,206 Points
samiff
samiff
31,206 Points

Thanks for your help so much on this James. I feel a lot more comfortable with the selectors now.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Sam - CSS really clicked for me when I figured out that it's pretty much about selecting elements and being able to position them on the page.

For these more advanced selectors you can use the selectoracle, which will translate what a select does in English

samiff
samiff
31,206 Points
samiff
samiff
31,206 Points

That site is hilarious James. Will have to keep it handy in case I need it again, thanks!