CODEWITHSUNDEEP
csscss-selectors
Ivo
Ivo

Reputation: 2636

hover with a nth-child

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);

    }

Upvotes: 19

Views: 69740

Answers (2)

Louis Ricci
Louis Ricci

Reputation: 21106

#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.

Upvotes: 24

Homam
Homam

Reputation: 706

in which browser did you tried this? and on how many elements did you run the formula? it will run from the third element in your parent element AND
you should add :hover
after the nth-child like this::nth-child(1n+4):hover
although it wont work in IE8 or earlier
EDIT:
i tried and the order did not affect the result you can put :hover before the :nthchild()

Upvotes: 0

Related Questions