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 Selectors Link and User Action Pseudo-Classes

Stephanie Wooten
Stephanie Wooten
1,380 Points

Different code in focus pseudo-class section

I'm not sure if someone has noted this before, but I figured I would throw it out there. At the end of the "Link and User Action Pseudo-Classes" video when he's discussing the focus pseudo-class, it first shows "input:focus" etc but then the yellow background-color goes through the links on the html, not the input field. Then when they go back to the code, it shows "a:focus". I'm only mentioning this because I was not sure if when you do "input:focus" it would highlight the hyperlinks or the input fields as yellow. So, I guess my question is, which code results in which result? Thank you!

2 Answers

Chris Dziewa
Chris Dziewa
17,781 Points

It's been a while since I've done this course but that is really funny. It appears that when they recorded the screencast, they first entered the wrong selector into the video. Then they changed it before they went on to view the page. Good find! Hopefully this clears things up for you: input:focus should not select your links, only the actual input elements like text and email fields, etc. To select the hyperlinks on focus, you would use the a:focus selector.

James Barnett
James Barnett
39,199 Points

Guil Hernandez - This looks like a mistake in the video. Can errata be added to the teacher's note about this?

input:focus also highlights the submit button as yellow. But :focus didn't not turn the background color of the submit button yellow. Do you know why is that so?

Chris Dziewa
Chris Dziewa
17,781 Points

Elements tend to have different behaviors with focus. It would not be very pleasing if a button turned yellow on focus, unless it was intentionally styled that way to match a color scheme. Each browser will have it's own preset styling for focus which can be overridden. It just wouldn't make sense to have preset background styling for buttons on focus.

Stephanie Wooten
Stephanie Wooten
1,380 Points

Great - Thank you so much for clarifying!

I re-watched it at least 3 times because I thought I was missing something.

Chris Dziewa
Chris Dziewa
17,781 Points

Anytime! I know how that goes!

Kevin Murphy
Kevin Murphy
24,380 Points

Had same question. Thanks for throwing that out there and to Chris for the response!