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

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
Posted by SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

input not receiving :focus styles.

Hi, for some reason my input elements are not receiving the styles when I use the focus focus pseudo-class. When I use input:focus, it targets the input elements no problem. But as Guil said if you wanted to target both links and input elements at the same time you can simply write the :focus class. When I do, it still targets the link elements but not the input elements. here's my code.

<form>
       <input type="text" name="name" placeholder="name" />
       <input type="text" name="email" placeholder="email" />
       <input type="submit" name="submit" />
</form>

:focus {
       background-color: yellow;
}

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Samuel,

I'm not sure why this wouldn't be working for you.

I put your code in a codepen demo and it works as expected. All 3 inputs have a yellow background when they have focus.

http://codepen.io/anon/pen/wBwPwY

The only difference is that in the video the submit button didn't change because Guil had assigned it a steelblue background with a more specific selector. So it didn't receive the yellow background like everything else.

Do you have more css than that?

Did you by chance target the text inputs and give them a background color?

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Wow dude you're freaking awesome. That's exactly the problem. you see since this code was similar to the previous lesson, i simply copied it instead of re-writing the whole thing then removed what wasn't supposed to be there, but I missed the background color property. thanks dude. you're freaking awesome! This was the problem, but I commented it out and it worked fine.

input[type="email"],
input[type="text] {
      margin-bottom: 15px;
      width: 250px;
      border: 2px solid steelblue;
      /*background: #fff;*/
      padding: 10px;
      display: block;
      color: gray;
}

Thanks bro you know your stuff.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points
SAMUEL LAWRENCE
SAMUEL LAWRENCE
Courses Plus Student 8,447 Points

Hi Nick, thanks for the rapid response. However as I said in my question, it works when I appended it to the input selector. However following along with the tutor, Guil, he said that if you wanted to target all the links and inputs simultaneously, you only need to write the :focus pseudo selector. In the lesson video when he did that it worked, and I'm assuming it worked for the other students too, because I checked the forum and there don't seem to be anyone else who's having this issue just me. So could it be something I'm missing? I made sure my code was exactly like his. At first it wasn't cause I was trying different things to make sure I understood how to use the classes. but that still didn't fix the problem. Any suggestions?