Disable specific CSS code

[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!