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
orange sky
Front End Web Development Techdegree Student 4,945 Points:only-child
Hello,
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>
<html>
<head>
<title>Structural Pseudo-classes</title>
<link rel="stylesheet" href="">
<style>
body{
padding:1% 0 0 0;
font-family:sans-serif;
}
ul{
background-color:pink;
margin:1% 25%;
padding:12px;
border:1px solid grey;
font-size:1.5em;
}
li{
padding:15px;
border-bottom:2px solid red;
list-style-position:inside;
}
/* trying out :first-child, :last-child, :only-child*/
li:first-child{
color:green;
}
h2:only-child{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<h2>Heading inside the body</h2>
<div>
<ul>
<li> First child </li>
<li> Second child </li>
<li> Third child </li>
<li> Fourth child </li>
<li> Fifth child </li>
</ul>
</body>
</html>
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi 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?
notf0und
11,940 PointsIn 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
Jason Anello
Courses Plus Student 94,610 PointsHi Bryan,
:only-child works like :nth-chlld in that the element you combine it with is the child, not the parent.
notf0und
11,940 PointsOopsy! I read the MDN and CSS Tricks page wrong. Thanks for pointing that out.
orange sky
Front End Web Development Techdegree Student 4,945 PointsThanks 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.
Jason Anello
Courses Plus Student 94,610 PointsYou'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"
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsAccording to the transcript, "offset" is only mentioned once in this video.
As Bryan mentioned it is referring to the
:nth-childexpressionan + bGuil is referring tobas the offset. It's the offset from the beginning when using:nth-childand it's the offset from the end when using:nth-last-child