CODEWITHSUNDEEP
htmlcss
Stefano Borini
Stefano Borini

Reputation: 143785

How to match element containing another element?

In CSS, I want all links to have a border-bottom: 1px solid property. However, if I have a linked image, it gets the border as well. How can I change the a property if and only if it contains an img element?

Upvotes: 2

Views: 215

Answers (5)

user241244
user241244

Reputation:

Especially since the standard solution doesn't work for you, some code would be very helpful.

Shooting in the dark, my suggestion is to specify border width:

a { border-bottom: 1px solid blue; }
a img { border-width: 0 0 0 !important; }

or

a img { border-bottom-width:0; }

And failing either of those, I'd start looking at any other styles that would be overlapping (not necessarily being inherited, just affecting the visual space on hover), like padding and margins and background colors of containing elements.

Upvotes: 0

pixeltocode
pixeltocode

Reputation: 5308

why don't you wrap the <img> in a <span> and then use the CSS

a {border-bottom: 1px solid #33ccff;}
span a {border: none;}

Upvotes: 0

Steve Harrison
Steve Harrison

Reputation: 125500

Try using Descendant Selectors:

a img {
    border-bottom: none;
}

If it doesn't seem to be working, first make sure that the selector is correct (i.e. is referencing the correct element(s)) by putting some crazy statements in that will make it clear which elements are being affected by the selector:

a img {
    color: red;
    background-color: red;
    border-bottom: none;
}

When the selector is working correctly, you can then focus on the statement that isn't working (don't forget to remove the crazy statements, though!). It may be being overridden somewhere, so try adding !important to the end of the statement:

border-bottom: none !important;

If this works, then you need to carefully examine your CSS code and rearrange your style rules so that you're not overriding this rule.

If it still doesn't work, then make sure that you are overriding the correct property with the correct value.

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382696

....

<style>
  a{border-bottom: 1px solid;}
  a img{border:none;}
</style>

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 187024

a { text-decoration: none }

You are seeing the text decoration underline default for links. You cannot, however, change the style on a tags if they contain a img tag. CSS just doesn't work that way. You could add a class to any a with an image and assign a style based on that.

CSS

a.image { text-decoration: none }

HTML

<a href="foo" class="image"><img src="foo.jpg"/></a>

Upvotes: 2

Related Questions