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

Malcolm Stretten
Malcolm Stretten
3,814 Points
Posted by Malcolm Stretten
Malcolm Stretten
3,814 Points

can't make only-child code work

Here is my code...Can anyone please tell me what is wrong with the 'only-child' pseudo class, because it's not changing the list elements blue as shown on the video. I'm sure I have followed the code exactly as the instructor said.

/* Structural Pseudo-classes------------------ */

li:first-child { background: #52bab3; color: white; }

li:last-child { border: none; }

:only-child { color: #52bab3; font-size: 1.5em; }

7 Answers

Tim Makin
Tim Makin
17,261 Points
Tim Makin
Tim Makin
17,261 Points

Some people on other threads have found the problem is down to the "Window Resizer" Chrome extension. The code wasn't working for me but once I disabled the extension and restarted Chrome it worked correctly. If you have this extension installed maybe that could be your problem.

Adam Akers
Adam Akers
7,357 Points
Adam Akers
Adam Akers
7,357 Points

I just disabled the Window Resizer extension and refreshed the page and then it started working. Thank you Tim!

Jared Pooley
Jared Pooley
3,320 Points
Jared Pooley
Jared Pooley
3,320 Points

Thankyou so much Tim Makin!!!! :)

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Try preceding it with the list-item element

:only-child { color: #52bab3; font-size: 1.5em; }

Failing that, check that you're indeed select an element that is the only child of its containing element, so it;s the only one contained in that element.

Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

Thanks for the reply, Jonathan. But I'm certain it's the exact code defined by the tutor, so it does target the <ul> element, which is the only-child of the <body> element. I tried putting 'li' in various places as you suggested but it made no difference.

Vanessa Beck
Vanessa Beck
3,373 Points
Vanessa Beck
Vanessa Beck
3,373 Points

It's not working for me either. It quickly goes blue and comes back to the original style ...

/* Structural Pseudo-classes------------------ */

li:first-child { background: #52bab3; color: white; }

li:last-child { border: none; }

:only-child { color: #52bab3; font-size: 1.5em; }

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

seems to work fine for me. I copied and pasted your css exactly. paste your HTML. maybe you have an unclosed tag or something. http://codepen.io/anon/pen/akLRWN

Rick Rana
Rick Rana
10,285 Points
Rick Rana
Rick Rana
10,285 Points

The exact same problem happened to me as well. Typed the code correctly as instructed, refreshed the page and nothing happened. I then disabled the Window Resizer extension in Chrome, refreshed the page and it worked. Funny how that happens. Thanks for the tip Tim.

Kevin Pangestu
Kevin Pangestu
7,255 Points
Kevin Pangestu
Kevin Pangestu
7,255 Points

Try to use solution from Jason Anders in this link: https://teamtreehouse.com/community/many-people-are-concerned-that-chrome-doesnt-support-onlychild-but-in-the-video-guil-is-using-chrome

I downloaded the project and run it in local, it worksss!!! (Chrome) maybe there is an error with Treehouse Workspace