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

Posted by Ram Ada
Ram Ada
360 Points

Grouping Pseudo selectors

I have two pseudo selectors how do I group them?

input[type="text"]:hover { border: 1px solid rgba(2,73,48,.5); }

input[type="text"]:focus { border: 1px solid rgba(2,73,48,.5); }

I've tried:

input[type="text"]:hover:focus { }

and

input[type="text"]:hover, :focus { }

and

input[type="text"] :hover, :focus { }

None of these seem to work. Any advice? Thank you!

2 Answers

Keith Wyland
Keith Wyland
10,576 Points

Hi Ram, You're on the right track with adding a comma and then the next selector. You just need to add the full selector rule after the comma. So if I wanted to select a tags both when they are hovered and active I would do:

a:hover, a:active {
  border: 1px solid black;
}

Does that help?

Ram Ada
Ram Ada
360 Points

Thanks Keith! It worked.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

If you need anymore info, here's a great run down on how you can group selectors together

Remember, the only difference between grouping selectors and grouping psuedo-selectors is that later can be chained together.