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 trialJames King
5,529 PointsTrouble Understanding :only-child
According to MDN :only-child represents an element without any siblings. However, the below code turns the font color green for each list item. If it only represents an element without any siblings, then wouldn't it not work because the <ol> element has a sibling?
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<meta charset="utf-8" />
<style>
ol :only-child {
color: green;
}
</style>
</head>
<body>
<ol>
<li>
First
<ul>
<li>This list has just one element.</li>
</ul>
</li>
<li>
Second
<ul>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
<li>This list has three elements.</li>
</ul>
</li>
</ol>
<ol>
<li>sibling</li>
</ol>
</body>
</html>
1 Answer
Stuart Wright
41,120 PointsYour understanding is correct - you've just made a minor syntax error which is affecting the behaviour. There should be no space between ol and :only-child. Try it out and you'll see the difference.
James King
5,529 PointsJames King
5,529 PointsThanks Stuart,
In another post I noticed the answer including separating the element from the colon (see below): https://teamtreehouse.com/community/onlychild-no-working-as-expected
/* Do note the space between body and :only-child, that is required and not a typo */ body :only-child { color: #52bab3; font-size: 1.5em; }
I guess this is only the case for <body>,<div>, and other document elements?
Stuart Wright
41,120 PointsStuart Wright
41,120 PointsMy understanding is that they mean different things:
the way you had it originally means โtarget any :only-child elements that are descendants (not necessarily direct descendants) of ol elements.
removing the space, the selector now means โtarget any ol elements that have no siblingsโ.
I donโt think this logic is affected if you change ol to body or div, but Iโm not 100% on that.
James King
5,529 PointsJames King
5,529 PointsThanks for the help. Much more understandable now.
andren
28,558 Pointsandren
28,558 PointsI am the person that wrote that other answer you referenced, Stuart Wright's interpretation is correct.
In that answer I placed a space between the tag selector (body) and
:only-child
because the selector was meant to be a descendant selector which targets all:only-child
elements found within thebody
element.If you don't place a space between the tag selector and
:only-child
then you get a combined selector instead which will only target elements that match that tag and have no siblings.In other words:
This does not change based on the element that is being selected or the type of selectors you use, placing a space between selectors will result in a descendant selector, and placing no space between selectors will combine them so CSS will only look for elements that match all of the selectors at once.
Since in your code you wanted to select only
ol
elements that have no siblings you want a combined selector, so no spaces. With a space like you had originally you instead select all elements that have no sibling that are descendants of theol
, which includes theli
element with no siblings that is found within it.James King
5,529 PointsJames King
5,529 PointsHi andren,
Thanks a lot for your input. This is much more clear to me now. I'm new to posting in forums so I wasn't sure how to add you directly. Thanks again.
andren
28,558 Pointsandren
28,558 PointsNo worries. I might have been a bit unclear in my other answer, I might go back and edit it a bit to make it a bit more clear why that space is there.
Anyway to mention somebody in your post so that they get a message you just have to type the @ symbol in your post then immediately after it start to type a person's name. A list of users matching that name will appear in a hover window. Once the right username appears in the list just click on it.
After clicking the name the @ symbol will disappear and the user's name will appear instead. In your text box the username will look like completely normal text, but when you actually post your message it will be replaced with a link to the user and the user will receive an email notification that they have been mentioned.
You can test it out by adding a mention to my name in your reply to this post.