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 CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :only-child and :empty

James King
James King
5,529 Points
Posted by James King
James King
5,529 Points

Trouble 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
Stuart Wright
41,118 Points
Stuart Wright
Stuart Wright
41,118 Points

Your 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
James King
5,529 Points
James King
James King
5,529 Points

Thanks 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
Stuart Wright
41,118 Points
Stuart Wright
Stuart Wright
41,118 Points

My 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
James King
5,529 Points
James King
James King
5,529 Points

Thanks for the help. Much more understandable now.

andren
andren
28,558 Points
andren
andren
28,558 Points

I 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 the body 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:

/* Will target body elements that have no siblings */
body:only-child {}

/* Will target elements that have no siblings that are descendants of body */
body :only-child {}

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 the ol, which includes the li element with no siblings that is found within it.

James King
James King
5,529 Points
James King
James King
5,529 Points

Hi 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
andren
28,558 Points
andren
andren
28,558 Points

No 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.