Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :only-child and :empty

:only-child psuedo class not displaying properly in Chrome.

When I followed the instructions in the video with Guil, we are instructed to apply :only-child which gives the properties to the unordered list. When I applied the properties such as font-size and color, the color was omitted but the font size was applied. I then tried this on the Mozilla browser and the color and font size were applied properly. Not sure what is going on but thought I would lets others know I also had this issue.

giraffekey
giraffekey
11,650 Points

Could you post your code please?

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,752 Points

When I applied the properties such as font-size and color, the color was omitted but the font size was applied. I then tried this on the Mozilla browser and the color and font size were applied properly. Not sure what is going on but thought I would lets others know I also had this issue.

I ran into the exact same issue. In Chrome it doesn't display properly, but in Firefox and Edge is looks like demonstrated in the video.

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

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

li:last-child { border: none; }

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

2 Answers

Tobias Graefe
Tobias Graefe
11,934 Points

Your color property is overwritten by the color property of the body element. But I haven't found out how to fix it so far ;-)

Steven Parker
Steven Parker
216,136 Points

Changing the order might help. For items with the same level of specificity, the one that comes last will take effect.

Steven Parker
Steven Parker
216,136 Points

Chrome is fully compatible with "only-child". It could be you have other CSS that is interfering with the size setting.

To facilitate analysis, always provide the complete code (formatted using Markdown) or make a snapshot of your workspace and post the link to it here.