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

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

Could you post your code please?

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree
Nick Huemmer
Front End Web Development Techdegree Student 8,571 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,931 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
203,261 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
203,261 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.