Probobly a rather simple CSS Problem

Question

Hey,

I have this CSS-rule to get the "pushed-down" effect on pressed links:

a:active {
    position: relative;
    top: 1px;
}

Now this works as expected, however I want to write a rule that disable this on linked images as this one:

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

Is it possible?

Thanks.

Answer 1

You can reverse the effect on the child:

a:active img {
    position: relative;
    top: -1px;
}

Answer 2

I believe you could change your initial style to:

a {
    padding-bottom: 1px;
}

a:active {
    padding-top: 1px;
    padding-bottom: 0;
}

and then use this for the image:

a:active img {
    position: relative;
    top: -1px;
}

Haven't had a chance to test it yet, but I think this should do it.

Answer 3

I haven't tried this, but I think it should work.

a:active {
    position: relative;
    top: 1px;
}

a:active img{
    position: relative;
    top: -1px;
}

The other solution is to add a class to the all the a tags that contain images

Answer 4

Unfortunately there is not yet a selector to differentiate text only links to image links. However you could get away with this:

p a:active {
    position: relative;
    top: 1px;
}

If your links are all contained within paragraph tags this will work, and will not affect your image tags. You could create one for H1, H2, etc for any tags you need to include.