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 Foundations Advanced Selectors UI Element States Pseudo-Classes

Andrew Kenower
Andrew Kenower
3,069 Points
Posted by Andrew Kenower
Andrew Kenower
3,069 Points

Does :enabled override :focus?

I noticed that :enabled makes :focus not work on the input elements. I'm having trouble thinking of practical applications for this.

2 Answers

Lady Do While
Lady Do While
6,027 Points
Lady Do While
Lady Do While
6,027 Points

It doesn't have to do with specificity, but the cascade. If you write (taken from Marcus's pen, above):

input:enabled {  background-color: #aff; }
input:focus {  background-color: #3fa; }

The element will be determined by the rule for :enabled until it comes into :focus, which is a rule that comes later in your code.

On the other hand, if you write:

input:focus {  background-color: #3fa; }
input:enabled {  background-color: #aff; }

Since :enabled is lower down the cascade, it will never allow your :focus rule to be displayed, which is the problem you were running into.

Therefore it is not about specificity (both have specificity of 0-1-0, like other classes and pseudo-classes), but the cascade.

Marcus Parsons
Marcus Parsons
15,719 Points

I revoked where Andrew gave me the best answer and gave it to you, Laura. haha You deserve that. Thank you for the correction.

I went ahead and deleted my response so that there's no confusion that yours is the correct one.

I think it should be the case, though, that I had originally presented, that focus would override enabled regardless of where it came in the cascade. It would make more sense to have the focus pseudo-class override enabled since enabled applies to all enabled elements and focus can only apply to one, which is to say from a general pseudo class to a very specific pseudo class.

Marcus Parsons
Marcus Parsons
15,719 Points

An even simpler solution that is not affected by cascade is to not use the "enabled" pseudo class at all. Instead, target ":focus" pseudo class and general inputs instead of "enabled" inputs. The "input" selector is going to apply to all inputs, but since we've added the more specific "disabled" pseudo class, "input" is overwritten by that. "focus" also overwrites the general "input" selector. I have tested this out, and regardless of the cascading order of these selectors, the styles will be applied exactly as we want them to be.

You'll notice that in this CodePen that if we were to go by the cascade alone, the "disabled" input and "focus" pseudo class should be overwritten by input but it is not. And in this case, it is due to specificity and not cascading.

CodePen

Lady Do While
Lady Do While
6,027 Points
Lady Do While
Lady Do While
6,027 Points

Yes, that is the simplest and cleanest solution and best solution to the problem.

The :enabled class selector works like a "normal" or "inherent" value on some other properties -- its only practical use it to override previously formatted elements in the parent element and such. Other examples of setting the default values explicitly are: font-weight: normal or position: static. (To answer Andrew's question of practical uses of a seemingly troublesome pseudo-selector.)

Fun tour of the impact of specificity and cascade!

Marcus Parsons
Marcus Parsons
15,719 Points

We learn something new everyday :)

Marcus Parsons
Marcus Parsons
15,719 Points

Always glad to help, Andrew!