510 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
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
  • Has been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Author had a Free File of the Month
  • Bought between 10 and 49 items
  • Egypt
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 10 000 and 50 000 dollars
+1 more
wizylabs says

I think your solution will be jQuery

$('a:has(img)').css({ background: 'none' });
3424 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • United States
  • Has been a member for 4-5 years
+5 more
sevenspark Volunteer 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
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Envato Studio (Microlancer) Beta Tester
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
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