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

Adam Duffy
Adam Duffy
4,466 Points
Posted by Adam Duffy
Adam Duffy
4,466 Points

: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
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,840 Points
Nick Huemmer
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 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

Steven Parker
Steven Parker
231,268 Points
Steven Parker
Steven Parker
231,268 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.

Tobias Graefe
Tobias Graefe
11,934 Points
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
231,268 Points
Steven Parker
Steven Parker
231,268 Points

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