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

Francis N
Francis N
10,376 Points
Posted by Francis N
Francis N
10,376 Points

many people are concerned that chrome doesnt support :only-child but in the video, Guil is using Chrome....

He is using Chrome browser in his workspace to preview and supposedly it works... Since it doesn't work, are there alternatives to get the same solution as :only-child under chrome?

makishamaier
makishamaier
3,070 Points

This doesn't necessarily help, but I'd like to mention that I just tested this using Chrome + Workspaces, and had no issues with getting my :only-child code to work, even without including span.

Not sure if this means the Workspaces' bug some people were mentioning has been fixed, or if something else could have been at fault.

6 Answers

Paul Cox
Paul Cox
12,671 Points
Paul Cox
Paul Cox
12,671 Points

I just tried this as it seemed highly unlikely that Chrome doesn't support this. I had the same issue but after adding a tomato background I noticed that I was getting a "flash of content" of the tomato background on reload.

This lead me to believe that an extension was injecting some html into the body leading to the ul no longer being the only-child of the body. Removing the Window Resizer extension recommended in an earlier course fixed the problem and now the only-child selector worked correctly.

Abir Ahmed
Abir Ahmed
Courses Plus Student 8,616 Points
Abir Ahmed
Abir Ahmed
Courses Plus Student 8,616 Points

I removed the extension windows resizer and it works, thanks

Abir Ahmed
Abir Ahmed
Courses Plus Student 8,616 Points
Abir Ahmed
Abir Ahmed
Courses Plus Student 8,616 Points

I removed the extension windows resizer and it works, thanks

Olivier Van hamme
Olivier Van hamme
5,418 Points
Olivier Van hamme
Olivier Van hamme
5,418 Points

Disabling the window resizer is sufficient. There's no need to remove the extension altogether.

  1. In the Chrome Hamburger menu: Settings > Extensions > Window Resizer* > Disable by unchecking the box.
  2. Restart Chrome, and everything should work.

(*) This will be in the list if you have previously installed Window Resizer.

Note: I am not making use of the Treehouse workspace, instead I am using Sublime text.

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Francis,

I'm not sure where you heard that :only-child doesn't work in Chrome?

According to the MDN and CanIUse.com, it is supported in pretty much every browser/version with a couple exceptions with IE.

:)

Viv Fouracre
Viv Fouracre
9,062 Points
Viv Fouracre
Viv Fouracre
9,062 Points

I had the same problem when using workspaces and just followed the advice above:

Disabling the window resizer is sufficient. There's no need to remove the extension altogether.

In the Chrome Hamburger menu: Settings > Extensions > Window Resizer* > Disable by unchecking the box. Restart Chrome, and everything should work.

Francis N
Francis N
10,376 Points
Francis N
Francis N
10,376 Points

i was going through some of the answers here:

https://teamtreehouse.com/community/only-child-doesnt-work

and here,

https://teamtreehouse.com/community/having-trouble-with-onlychild

following the instructions, i am not able to get :only-child to work on my browser.

here is my workspace: http://w.trhou.se/cekwut0o1l

i noticed however, when you get to the span portion, it works.

Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

I've read through the threads you linked to and they note that it is a bug in Treehouse's Workspace and not an incompatibility with Chrome or any other browser.

I tested this in my own editor and previewed the code in Chrome, Firefox, and Safari with success in all three.

So, for some reason :only-child does not work in the local Workspaces with any browser, but it does work in all browsers outside of Treehouse and Workspaces.

:)

Francis N
Francis N
10,376 Points
Francis N
Francis N
10,376 Points

Ahh ok. I will download project files and check on my editor. Thx!

Gianluca Maio
Gianluca Maio
9,128 Points
Gianluca Maio
Gianluca Maio
9,128 Points

I had this issue with :only-child not working in workspace. However, if you copy/paste html+css codes onto notepad++ then run the page locally, you will notice that it works fine on Chrome.

I wouldn't use workspaces to test the code in several browsers. I would always either copy/paste or download the code then test the pages on different browsers to observe if the code works or not. :)