Search code examples
htmlcssbackground-imagestyling

Remove background image which is important by Default


Actually, I'm using a toaster library, and everything is working fine. My issue is that the toaster is automatically grabbing an important background image. And since the background image must be removed, I am unable to do it myself. Now what should I do? Is there another option or way to get rid of the !important tag that comes with background images by default?

As you can see class="toast-error" is taking the default bg with !important.

enter image description here


Solution

  • That has Id, Class, and Important, so to remove it you need a stronger selector

    a) Id + Class + Important + Userstyle: userstyles (from extenstions) are more important then in-page css

    b) Id + Id + Important: add an extra id that is already in the page, like #polotno-whatever ~ #toast-container > .toast-error

    c) Inline + Important: in case you have acess to JS or HTML and thus can change element.style attribute. You'll need MutationObserver to check when new elements are added in realtime

    d) Id + Class + Important + Later: generally, if the exactly same selector, and the style tag is later then that one it'll override