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
.
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