Selector syntax confusion

[Lucy]

I've got a class called .portfoliotext and have styled images inside that like so:

.portfoliotext img	{		max-width:80%;		border:.5rem #95B0B2 solid;		margin:3% auto 3% auto;		display:block;	}

I want the border colour (ONLY for hyperlinked images) to change on hover, which should be simple, but I don't think I'm getting the syntax right. Here's what I've tried:

.portfoliotext img a:hover	{		border:.5rem #FFFFFF solid;	}

and

.portfoliotext img:a:hover	{		border:.5rem #FFFFFF solid;	}

Help?

 

 

 

EDIT:

Okay, apparantly it needs to be

.portfoliotext a:hover img

Though I don't understand why. Surely

.portfoliotext img a:hover

Or similar, should mean hovered linked images within the div? :/

Edited January 8, 2015 by Lucy

[Ingolme]

Selectors are ordered by the HTML tree.

This structure is ordered .portfoliotext a img

<div class="portfoliotext">    <a href="">        <img>    </a></div>

If you used the selector .portfoliotext img a

Then you're assuming a structure like this:

<div class="portfoliotext">    <img>        <a></a>    </img></div>

:hover is a pseudo-class that you can put on any element. a:hover checks that the mouse is over an <a> element, img:hover would check that the mouse is over an <img> element.

[Lucy]

Great, I understand now. Thanks very much!

[sallyjoshua]

css is called cascading style sheets so if u look at it from that way u look how the cascade is applied then u will figure this one out