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 Transitions and Transforms Getting Started with CSS Transforms Changing the Transform Position with transform-origin

armand Rodriguez
armand Rodriguez
7,830 Points
Posted by armand Rodriguez
armand Rodriguez
7,830 Points

Hover psuedo-class targeting

Whats the difference between

.photo:hover image

and

.photo img:hover?

Just something I am a bit confused about.

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

They respond to different conditions.

Well, the first one is not valid CSS, since "image" is not a valid tag name. But let's pretend for the moment that instead of ".photo:hover image" the first one was ".photo:hover img". Then comparing it to ".photo img:hover", they both potentially (based on the mouse) target image (img) elements that are somewhere inside another element that has the class "photo".

The first one would target those image elements anytime the mouse was over the element with the "photo" class. And if there were several image elements inside, they would all be affected at once.

But the second one targets only the specific image that the mouse is directly over. It would only affect that one image, and if there were several, just one at a time as the mouse moved over them.

armand Rodriguez
armand Rodriguez
7,830 Points
armand Rodriguez
armand Rodriguez
7,830 Points

After a lot of over thinking this issue, I finally understand! I don't know why this took me so long to wrap m head around lol.

Christopher Debove
PLUS
Christopher Debove
Courses Plus Student 18,373 Points
Christopher Debove
Christopher Debove
Courses Plus Student 18,373 Points

.photo:hover img {}

Apply style on img which is descendant of an element with "photo" class which is hovered

.photo img:hover {}

Apply style on img which you hover and is descendant of an element with ".photo" class

Simply said. With the first rule, when hovering the element with the .photo class, all children image will get the style applied. With the second rule, only the image hover will get the style applied.