How do I get rid of the background on a linked image? - css

Question

I guess I should start this off by saying that I'm working on a tumblr theme. This is what the link code looks like:
a {
color: {color:Text};
text-decoration: none;
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #C1FFC1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
Now this code works perfectly fine; however, images that are links -- and just about every photo post IS a link -- show up with a green background, which is fine for text, but ugly for a picture.
I tried to use the following code to get rid of this:
a img {
border-width: 0px;
background: none;
}
This didn't work, however, and the background was still there.
If any of you want to check my theme out, here is a link to the blog: http://queenquagsire.tumblr.com (Just thought I should say, since this is not a professional website, and I'm only using it for testing purposes some -- well, all -- of the posts are pretty childish.)
The green background is kinda hard to see, but it's behind the center of image post, and sticks out. Also, when you hover over it, it disappears.
I feel like this is very simple, but I still can't seem to fix it; I've visited other websites and tried their solutions, but had no luck.
Also, I did try to change the link code to this
p a {
color: {color:Text};
text-decoration: none;
padding: 3px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
background: #C1FFC1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
so it only affected paragraphs, but that messed some other things up.
Can anyone help? Am I going to have to edit the link code itself?

Answer 1

CSS cannot look at an element’s children when deciding how to style that element. You’ll have to change the HTML part of your template to add a special class to image posts (say, image-post), and then style all a elements within one specially:
.image-post a {
background: none;
}
Historical note: An old draft of CSS3 from 2001 did specify a pseudo-class that could be used to select on an element’s content. However, all subsequent drafts have blanked that section out.