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
Sam Weeks
Front End Web Development Techdegree Student 16,699 Points:only child, tad confused...
All span elements marked confused return in the #52bab3 color declared below; however, the span elements marked understand only return that color for elements matching :only child. I know iv'e gone wrong somewhere, but I cannot seem to return any color over than #52bab3 for the span elements nested in the <li> when using Only Child. I'm Just trying to get my head around this and if you could explain why this is happening It would be amazing.... Thank you if you can get back to me on this as Ive tried the last hour to figure it out :)....
span:only-child{
color: #52bab3;
font-size: 1.8em;
}
<div>
<h1>Psuedo Selectors</h1> </div>
<ul>
<li>Item 1</li>
<li>Item 2 <span>✓</span></li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6<span><span><span><h1>confused</h1></span> <span><span>confused</span>confused</span></span></span></li>
<li></li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
<span><span><h1>understand</h1></span> <span><span>understand</span>understand</span></span>
</body>
3 Answers
Steven Parker
230,970 PointsI'm not sure I understand what's confusing you, but the nested spans are only children of the span around them, so the CSS rule is applied to them.
It might help to make the HTML more readable by using indentation to indicate nesting levels:
<li>Item 6
<span>
<span>
<span><h1>confused</h1></span>
<span>
<span>confused</span>
confused
</span>
</span>
</span>
</li>
To further confuse things, the "color" property is inherited by child elements even if they are not only children or spans themselves.
Ubo Town
3,227 Pointsso confusing...one answer after other
Ubo Town
3,227 Pointsso confusing...one answer after other
Sam Weeks
Front End Web Development Techdegree Student 16,699 PointsSam Weeks
Front End Web Development Techdegree Student 16,699 PointsThanks Steven, I've figured it out now. I was trying to make the checkmarks regarding the lesson stay grey and tried many different approaches to do so, when using :only child I'm not sure why but when I had 2
<span>elements next to each other they still both inherited the 52bab3 colour; instead of turning grey as they were sibling elements instead of only childs (if thats correct). Thanks again though :)Steven Parker
230,970 PointsSteven Parker
230,970 PointsBut the nested spans inside the siblings were also "only child" elements.
James Augustus
Front End Web Development Techdegree Student 674 PointsJames Augustus
Front End Web Development Techdegree Student 674 Pointshello sam when i watched this video i also was a bit confused but i had figured it out only-child selector doesn't know anything outside of our body in html they are only bounded inside a body they can't know outside body of our html page when we are talking about any tag suppose <h1>tag is a child of body so you will think that we can use :only-child to select only the body element and as we know that body has only <h1> so you will think that my style will apply on it by :only-child but no it will wont apply because it will think as <h1> as the root element and if you put inside<h1>for example <span> it will apply those style to the span because it will think <span> as the only child of <h1> if you want to put the styles to the including <span> <h1> you will wrap the <h1> element inside a <div> then apply :only-child.then it will defeinitely works