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 trialMalcolm Stretten
3,814 Pointscan'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
17,261 PointsSome 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.
Jonathan Grieve
Treehouse Moderator 91,253 PointsTry 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
3,814 PointsThanks 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
3,373 PointsIt'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
17,730 Pointsseems 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
10,285 PointsThe 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
7,255 PointsTry 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
Christopher Stuart
Full Stack JavaScript Techdegree Graduate 27,771 PointsDoesn't work for me either and I don't have the Windows Resizer extension.
Adam Akers
7,357 PointsAdam Akers
7,357 PointsI just disabled the Window Resizer extension and refreshed the page and then it started working. Thank you Tim!
Jared Pooley
3,320 PointsJared Pooley
3,320 PointsThankyou so much Tim Makin!!!! :)