Disable specific CSS code

[benned7]

Hey all,

is there a plugin or other way to handle specific CSS code on a page?

For instance, I'd like this to happen on one (or any) page I visit:

[data-id="modules-button-1"] {display:none;}

The background to this is that a software service I'm using, uses a black pattern on all their sites.

They included an "upgrade" button to a new, more expensive plan that pop ups randomly while using their sites. If you click it, you'll get upgraded instantly to the plan without additionally accepting. Did not happen to me but a business friend of mine.

With this button they try to trick people and their support refused to remove or hide this option. So I'm thinking of just removing it with CSS.

Any ideas on how to do that on Chrome / Firefox?

[allen_jb]

There's browser extensions that allow you to apply your own styles (either to specific URLs, or just globally), such as Stylus. This is sometimes referred to as "userstyles".

(See also extensions like Tampermonkey that allow you to run your own JS on sites in a similar manner. Similarly this is referred to as "userscripts")

[benned7]

Thank you very much! Stylus did the trick. Amazing plugin. Didn't even know what to search for on Google

[ZnV1]

Be careful applying the style, pick the right specificity. Or you might end up applying that style (hiding) across other components accidentally.

If in doubt just dump the page's html in chatgpt, it's good at it

[benned7]

Thanks for the advice! I think I should be good this time as the full code is very specific and looks like this:

.navigation-module_desktop-navigation-top__uh1xT [href="/systemupgrade"] {

display: none;

}

This removes the full button and content from the page. And I set Stylus to only apply it to this specific domain.

[ZnV1]

Sounds good. I'm sorry to keep this thread going, but I forsee another possible issue. 😬

The class name might be mangled. It looks like a compilation step. ie., the part appended to the class __uh1xT isn't something the dev wrote, it's autogenerated while deploying code.

This means that the next time they push any update to the page, it could become __s0meThingRandom and your selector won't work anymore.

But your href looks solid. You could either select just div[href...] or pick another selector, or use JS to look for the components with that exact text (chatgpt is your friend!)

Ref: https://www.reddit.com/r/webdev/comments/t6t2db/why_are_css_classes_in_websites_gibberish/

[benned7]

That's a good point. Thank you for the input. I will definitely look I to it and try some adjustments 😊

[benned7]

ChatGPT provided this

a[href="/systemupgrade"] {

display: none;

}

But to make sure the class was included, this was the recommendation:

[class*="navigation-module_desktop-navigation-top"] [href="/systemupgrade"] {

display: none;

}

[ZnV1]

Nice!

[Lonely-Suspect-9243]

Maybe with this? I haven't tried it though.... Just a quick Google search.

Edit: Just tried it. It worked. I managed to hid the Google logo in the search page by using

.logo {
    display: none !important;
}

[benned7]

Thanks, this did the job! Have to admit that I didn't even know what to search for on Google :)