510 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+4 more
pxt says

Hi there,

I’m having a little dilemma with CSS selectors. Basically, I need to set background to none if an <a /> has a child of <img />.

This is because on the website, all links have a background style on hover (:hover), but this is also applied to images which are wrapped as a link. So I need to remove the style which is on the a tag when there is an image inside the link.

a:hover > img would work, but I need the apply the style to the a tag not the img tag.

Thanks for any help!

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 5 years
  • Has sold $40,000+ on Envato Market
+4 more
Orbital_Themes says

I’m pretty sure that you’re only left with javascript solution, that is applying specific class to all anchor tags containing an image and setting this class to have no background.

1012 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+6 more
wizylabs says

I think your solution will be jQuery

$('a:has(img)').css({ background: 'none' });
3446 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Moderator says

Hi there,

I’m having a little dilemma with CSS selectors. Basically, I need to set background to none if an <a /> has a child of <img />.

This is because on the website, all links have a background style on hover (:hover), but this is also applied to images which are wrapped as a link. So I need to remove the style which is on the a tag when there is an image inside the link.

a:hover > img would work, but I need the apply the style to the a tag not the img tag. Thanks for any help!

pogoking is right in that you can’t do this with just CSS selectors. You can’t select backwards essentially (parents).

The best solution is to alter the HTML output. Do a check to see if the anchor tag will contain an image before printing the tag. Give it a class like “anchor-with-img”. Then set the background for .anchor-with-img to none;

So you end up with this structure:

<a>Normal Link</a>
<a> Normal Link</a>
<a class="anchor-with-img"><img /></a>

And then apply your CSS

.anchor-with-img{
   background:none;
}

Otherwise, like pogoking said, you can use JavaScript. But if you can edit the HTML output of the links, this way gives you a pure CSS solution.

510 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
+4 more
pxt says

Thanks for all the help. I didn’t think it was possible, but wanted to make sure.

In the end I went with the method of adding a class and targeting that. I would have used the jQuery method, but I want it to degrade when JavaScript is not used.

by
by
by
by
by
by