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 Basics (2014) Basic Selectors Pseudo-Classes

Posted by Brian Daigle
Brian Daigle
8,190 Points

Why is the 'color: white;' declaration ignored when the focus pseudo-class changes from 'a:focus' to just ':focus'?

At first I thought it was just my browser or something I did, but I rewatched the end of the video and saw it behaves the same way there, too. What's going on with that?

2 Answers

Laura Cray
Laura Cray
12,258 Points
Laura Cray
Laura Cray
12,258 Points

The reason that the background color changes, but not the font color is that there is another class definition that is more specific which overrides the state. In this case, there are defined font colors for links and visited links, but this is the first time that a background color has been defined. If you go back into your code and add "background-color: green" into your a:link pseudo-class, you will notice that it remains green even when focused.

CSS is cascading which means that attributes are rendered from most to least specific. If you see your pages selectively rendering properties, the odds are that there is another, more specific attribute that is affecting your final result.

Thania Abrahams
Thania Abrahams
972 Points

Thank you, that had me lost as hell but after trying your examples and paying careful attention to your explanation, I get it!

Bram Dijkhuis
Bram Dijkhuis
5,746 Points
Bram Dijkhuis
Bram Dijkhuis
5,746 Points

A pseudo-class is used to define a special state of an element. So to put it bluntly: If there is no element attached to a pseudo class then there is no pseudo class.

Brian Daigle
Brian Daigle
8,190 Points

That makes sense, but the pseudo class isn't being ignored entirely in this case because the other property in the declaration is showing up. So one property (background-color: orange;) works fine, but the other property (color: white;) is ignored.