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 Foundations Selectors Basic Structural Pseudo-Classes

Posted by Phouthalang Pygnasak
Phouthalang Pygnasak
4,795 Points

Confused about :only-child Pseudo-class??

I am confused as to how this Pseudo-class operates. I've noticed that it can select elements that only one child-element related to its parent.

But after trying this: 

<code>
    <body>
        <h3>
            <ul>
                <li>First child of ul</li>
            </ul>
        </h3>
        <h4>
            <ul>
                <li>First child of ul</li>
            <li>Second child</li>
                <li>Third child</li>
                <li>Fourth child</li>
                <li>Last child of ul</li>
            </ul>
        </h4>
    </body>
    </html>
    </code>

with the following Pseudo-class: 

h3:only-child {
     color: tomato;
}

It does not select the <h3> element as the only-child. Why? Is it not the only child element of its parent <body> element?

Because the following works; 

ul:only-child {
     color: tomato;
}

li:only-child {
    color: tomato;
}

So why does the <h3> not work? Is it not the only child element of the <body>?

AND why can't I get the code to display as code in this question? I've tried wrapping in """ """ and used <code></code> but the output remains as above. I don't get it, please provide some examples on how to accomplish embedding of code in this question forum. Thanks!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Phouthalang,

I did some additional formatting of your code to fix the inline tags that you had here.

You can use 3 backticks for code blocks and single backticks for posting short pieces of code inline with your text.

See this thread for more info: https://teamtreehouse.com/forum/posting-code-to-the-forum

1 Answer

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Okay, I think I have it figured out.

First, I reformatted your code in the forum. You use the back tick mark found on your keyboard near the esc key. 3 back ticks inline format your code like I just did, or 4 back ticks format your code like your code above. The back tick is different than the apostrophe key you were using to the markdown editor.

Now, moving on:

When using :only-child I don't believe you can use it on the body tag, and it doesn't appear to work that way. My understanding it h3:only-child doesn't work is because it's not a child to anything (but the body), so nothing is selected.

ul:only-child works because it both cases, the UL element is the only child to both the h3 and the h4 elements. So it applies your font color to the list tag, which causes the list item tags to inherit that color.

li:only-child selects only the child nested in the h3 tag since it truly is the only child of the UL tag in that particular list.

Using pseudo tags is always very depending on your HTML markup. Small changes to the HTML can easily change how these tags work.

http://css-tricks.com/almanac/selectors/o/only-child/

Phouthalang Pygnasak
Phouthalang Pygnasak
4,795 Points

Thank you for the Awesome explanation!

However, while I was rewatching the video and testing out my assumption to the problem, I somewhat concluded that the h3:only-child did not work because the <body> has two child elements; <h3> & <h4>. So to test that out, I removed the <h4> element and it worked.

This helped me understand its relationship, but it still seems that its a pretty complex way to layout. I guess many uses over time will make understanding its use simpler.

Thanks again for your explanation and pointing out how to embed code!! LOL, I was using the wrong mark-up .. go figure. :-D

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Yeah, it truthfully took me about 20 minutes of playing with it on Codepen.io and reading articles on :only-child to wrap my head around it.

Truth be told, I've never used it before. Not saying it's not useful, but I just kinda forgot about it. It is a bit tricky for some reason.

Glad you got it sorted!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Phouthalang,

Your conclusion is correct. It didn't work because the h4 is also a child of the body element.

If the element in question has siblings then it can't be an only child. So if you want to know if element:only-child is going to match, you need to see if it has any siblings.