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

Sina Maleki
Sina Maleki
6,135 Points
Posted by Sina Maleki
Sina Maleki
6,135 Points

conflict

Hi everyone, why :focus pseudo class override the :active class?

a:active {
  color: lightcoral;
}
a:focus {
  color: white;
  background-color: orange;
}

4 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Sina Maleki,

CSS, like JavaScript reads from top-to-bottom so if you want your :active pseudo-class to to always supercede the :focus state you will need to switch the order of them.

a:focus {
  color: white;
  background-color: orange;
}

a:active {
  color: lightcoral;
}

Happy coding!

Sergey Pomaraiko
Sergey Pomaraiko
5,572 Points
Sergey Pomaraiko
Sergey Pomaraiko
5,572 Points

To style links appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active

as mentioned on MDN

Sina Maleki
Sina Maleki
6,135 Points
Sina Maleki
Sina Maleki
6,135 Points

Thanks <a href="https://teamtreehouse.com/chrisupjohn">Chris Upjohn</a>, but I think when we click the anchor element, although the anchor's color was changed to "lightcoral" but the "background_color: orange" property was actually applied.

Benjamin Bledsoe
Benjamin Bledsoe
10,900 Points
Benjamin Bledsoe
Benjamin Bledsoe
10,900 Points

Hello Sina,

I believe the issue here is that the ":focus" pseudo-class styles get applied ONLY when the user is actually interacting with it. So basically it overrides whatever other styles are there.

This is from MDN pseudo-class page: "The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input)."

So, for example, If I have an <a> element with a :focus pseudo-class, whenever the user clicks on the <a> element, the :focus styles will get applied.

In your case, a good way to think about this is: what is happening is that the :focus styles are getting applied when clicked and overriding everything else at that time. =)

Hope this helps!

Ben