510 posts
  • 5 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+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!

743 posts
  • Elite Author
  • Weekly Top Seller
  • Featured Item
  • Most Wanted Winner
+5 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
  • 5 Years of Membership
  • Affiliate Level 2
  • Author Level 5
  • Collector Level 2
+8 more
wizylabs
says

I think your solution will be jQuery

$('a:has(img)').css({ background: 'none' });
3535 posts
  • Power Elite Author
  • Author Level 12
  • Trendsetter
  • United States
+13 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
  • 5 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Beta Tester
+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