Question

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?

Answer 1

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.