hover with a nth-child

Question

i was wondering if it is possible to use a hover with a nth-child like so

#gallery a img:hover {
    display: block;
    height:300px;
    width:450px;
    position:absolute;
    z-index:99;
    margin-left:-112.5px;
    margin-top:-75px;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

}

From this up here to some thing like this down here, only its not working

 #gallery a img:hover:nth-child(1n+4) {
        display: block;
        height:300px;
        width:450px;
        position:absolute;
        z-index:99;
        margin-left:-112.5px;
        margin-top:-75px;
        -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

    }

Answer 1

#gallery a:hover:nth-child(1n+4)

Will work correctly but style the A tags instead of the IMG inside.

When you have markup like...

<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>

You cannot select the inner IMG and then try to apply an nth-child on it because there is only 1 IMG inside of the A tag.

Refer to the JSFIDDLE I created http://jsfiddle.net/fXS93/2/

Any change in how the IMG markup is wrapped will reset the CSS matching and NTH-CHILD calculation. This applies even if you are matching on a CLASS that all of the IMG share.

This is true for the latest FF, Chrome, and IE9.