Prevent element from inherit CSS

Question

i'd like to know if there's a way to prevent a child element from inherit it's parent css, for example i have something like:

<div class="MenuSections>
<figure class="MenuIcon">
<img.../>
<figcaption class="MenuCaption">
</figure>
</div>

Then i use JQuery to change the Section and caption color when Section is clicked:

$(this).find("div").css("background-color", "white");
$(this).find(".MenuCaption").css("color", "Darkgreen");

But as my img is transparent it won't be visible on a white background.

I know you can override css properties on child elements but obviously this won't work on an img element, so what can i do?

Notes:

• BG colors are not negotiable
• position: absolute can't be used
• Img Must be transparent, so i can't toggle between imgs on JQuery

Answer 1

You can use CSS selectors within Jquery.

So in your Jquery code you could do something like ..

$(this).find("div *:not(<input element not to be selected>)).css("background-color", "white");

The * declares all elements... so all elements that are not what you selected.

You can find more information on sleectors here : https://api.jquery.com/category/selectors/