[CSS] Style an Element with a Specific Child

Envato Authors Theme Authors
1

Hi there,

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

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!

2

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.

3

I think your solution will be jQuery

$('a:has(img)').css({ background: 'none' });
4
Pexat said

Hi there,

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

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:

Normal Link
 Normal Link

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.

5

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.