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!

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 CSS Foundations Advanced Selectors Pseudo-Classes: :nth-child



In the code below, I have I purposely put a div around the h2 so that the h2 is the only child of the div. This h2 is the only child but this style does not work, why is that?

h2:only-child{background-color:yellow; }

2) the teacher says 'offset a lot, what does it mean?

<!DOCTYPE html>
  <title>Structural Pseudo-classes</title>
  <link rel="stylesheet" href="">

  padding:1% 0 0 0;

    margin:1% 25%;
    border:1px solid grey;



   border-bottom:2px solid red;

   /* trying out :first-child, :last-child, :only-child*/




<h2>Heading inside the body</h2>
    <li> First child </li>
    <li> Second child </li>
    <li> Third child </li>
    <li> Fourth child </li>
    <li> Fifth child </li>



3 Answers

Hi orange sky,

You didn't close off your div after the h2 When the browser attempted to fix this for you the h2 ended up not being an only child anymore. So if you close the div after the h2 then that style should work.

is it this video here that mentions "offset"? Do you know where about in the video?

According to the transcript, "offset" is only mentioned once in this video.

As Bryan mentioned it is referring to the :nth-child expression an + b Guil is referring to b as the offset. It's the offset from the beginning when using :nth-child and it's the offset from the end when using :nth-last-child

In regards to your second question, I believe Guil is referencing the :nth-child pseudo selector. This link helped me understand it much better: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Hi Bryan,

:only-child works like :nth-chlld in that the element you combine it with is the child, not the parent.

Oopsy! I read the MDN and CSS Tricks page wrong. Thanks for pointing that out.

Thanks Bryan and Jason!

I thought something was odd, I was expecting h2 to be higlighted. Thanks Jason!

As for offset, throughout may videos, he uses the word 'offset'. Here is a little script from the Relative Position video. Can you please give me a baby like definition. I would understand him if he were to say to "move the lefft by 35px," but he always says to give an element an offset of xnumber at this direction(left, right...) for ex: 'we will give it a bottom offset of 32 pixels' I think the word 'move' is a lot easier than offset, but I am not sure what offset is.

Here is a section from the teacher's script:

So, we'll go back into our stylesheet, and

right beneath the main-logo rule, we'll target main-nav.

And we will give it a bottom offset of 32 pixels,

which moves it up by 32 pixels.

And we'll then give it a left offset of 200 pixels.

You're welcome.

I think that Guil is using "offset" in an informal way in various contexts. For example in the video linked to here he's using it in reference to :nth-child and in your script example here it's being used to refer to positioning.

When Guil says "And we will give it a bottom offset of 32 pixels" you can think of it as "And we will give it a bottom position of 32 pixels"