css background color show on image links

Question

I have this problem that I thought was a easy fix but it wont work.

In my content I want all links to be red text and when hover I want red background with white text and radius and some padding. I also put transition to make it smooth.

I don't want any of this on image links so at the bottom I reset backgrounds and padding for images. But I still get a red border at the bottom of the image.

Can someone sort this out for me? Thank You!

#content a:link, #content a:visited, #content a:active{
color:#c5252c;
text-decoration:none;
padding:0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;

-webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-moz-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-ms-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-o-transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
transition: all 300ms cubic-bezier(0.445, 0.050, 0.550, 0.950); /* easeInOutSine */

-webkit-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950);
-moz-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950);
-ms-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950);
-o-transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950);
transition-timing-function: cubic-bezier(0.445, 0.030, 0.550, 0.950); /* easeInOutSine */}

#content a:hover{
background:#c5252c;
color:#FFF;
text-decoration:none;
padding:0 4px 0 4px;
}


#content a:link img, #content a:hover img, #content a:active img, #content a:visited img{
padding:0px;
background-color:transparent;
background:none;
}

Answer 1

Thats because you're not unsetting the background of the link but the background of the image inside of that link.

A solution for that would be to put a class on every link containing an image so you can reference it directly by #content .className and unset background and padding there.

Unfortunately you can't select an a by figuring out what it contains with pure css. You could do that with javascript, but its highly possible that that will be an overkill. jQuery for example has the :has() selector providing exactly the functionality you search for. Also there seems to be a selector providing this functionality to CSS in draft.

Answer 2

Thank you Guys.

Solved it with this script.

<script>
$( "a" ).has( "img" ).css( "background-color", "transparent" );
</script>

Answer 3

By selecting #content a:link img you are resetting the background on the image itself, but you need to reset it for the a.

You can set a special class for a elements that contain img elements, and reset the background for this special class.

<a class='image-link'>
  <img src="..." />
</a>

<a>this is a text link</a>

#content .image-link {background:none;}