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

I would like to know how to select to elements at the same time using the :hover pseudo class.

How to select two elements using :hover

div.first-div:hover, div.second-div:hover { background: red; }

2 Answers

Steven Parker
Steven Parker
231,007 Points

It depends on what you mean by "at the same time". Riku's suggestion will work if you just want to share the same rule with multiple selectors. But keep in mind that unless your elements are nested, you won't be likely to trigger both hovers at the same time (your mouse will be over just one at a time).

On the other hand, if you want to apply styles to elements other than the one you are hovering over, as long as they share a parent you can do this with a descendant or sibling selector. For example, if you wanted to change the color of every list item in an unordered list whenever you hover over any of them, you could do this:

ul:hover li { color: red; }

Just remember that the :hover does not have to apply to the last item in the selector.

thank you I will see if the result is what I am looking for / thank you for your input... happy codings.