How to get rid of link effects on image links

Asked May 22 '15 at 14:02

Active May 22 '15 at 14:35

Viewed 63 times

I'm styling links with a box shadow:

a {
    box-shadow: inset 0 -5px 0 rgba(100, 149, 237, .6);
    color: #333;
    text-decoration: none;
    color: inherit;
}

However, I can't get rid of it when the linked item is an image instead of text. I've tried removing it by styling a img, styling all images, !important, etc. I've even tried completely deleting the visited, hover and active states.

What am I missing?

asked May 22 '15 at 14:02

collegechurch

1

You can't style an element based on its contents as there is no parent selector. – Paulie_D May 22 '15 at 14:05
Possible duplicate - http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Paulie_D May 22 '15 at 14:06
place example markup of img – maioman May 22 '15 at 14:14
Here is the img style that doesn't work: a img { box-shadow: none; } – collegechurch May 22 '15 at 14:25
You **can't** do what you are trying to do with CSS. You can't select upwards in the DOM. – Paulie_D May 22 '15 at 14:27
What about styling the img? Why doesn't that work? img { box-shadow: none; } – collegechurch May 22 '15 at 14:29
You haven't applied those styles **to** the image in the first place to remove them – Paulie_D May 22 '15 at 14:30
Good point. So how do I get rid of the box shadow on an image link? – collegechurch May 22 '15 at 14:31
Without JS, **you can't**. You might want to rethink adding those styles to all links in the first place. – Paulie_D May 22 '15 at 14:34
Something to consider. Thanks. – collegechurch May 22 '15 at 14:45
@Paulie_D, @maioman, there is a way to do this after all—with the not selector. Create a class such as the following. It doesn't even need selectors: `.imagelink { }` Apply it to any link that uses an image, then style links this way: `a:link:not(.imagelink) { font-weight:bold; color:#0065FF; text-decoration:none; text-shadow:1px 1px 2px #96D4FF; border-radius:5px; }` Easier than JS or applying a class to every link in the site. – collegechurch Nov 13 '15 at 16:15

How to get rid of link effects on image links

0 Answers0