How Do I Stop a CSS Style from Affecting Some Sites?

[Anonymous]

I got a good global CSS theme in Stylish affecting all webpages. But I don’t want it to affect some webpages. What code can I use in that global style to create exceptions so that it doesn’t affect those webpages?

[Alen]

I wouldn’t start changing anything in the global style sheet. Instead override the style by adding a hook (another CSS class) to HTML so that you can target that specific element. In WordPress for example the body element usually has classes attached to it specific to what is being viewed… posts for example have ID’s if you need to target any individual post.

It would help if we can see sample code, instead of talking about it in abstract.

In short in would look like this:

/* Global Styles */
.my-global-element{ color:red; }

/* Custom Styles */
.about-page .my-global-element { color:green; }
.contact-page .my-global-element { color:blue; }

http://codepen.io/alenabdula/pen/ByoxRO

[Anonymous]

Hi, alen.. I’m new to CSS. Where should I place these hooks that you’re talking about? In the CSS style sheets for other websites or in the global style sheet?

Below is the global style sheet. Do take a look. Thanks!

[MOD EDIT – Codedump Removed]

[Shikkediel]

Going on your original post, I’d say remove the link to the style sheet (in the header of the page’s HTML document) altogether. But you can also add a link to a separate stylesheet and place it after the original one – anything you specify there will override the global style.

[Author]

Posts