CODEWITHSUNDEEP
cssstylesheet
Eric
Eric

Reputation: 6016

Is it possible to remove a CSS style in a subsequent file?

I know that in CSS, styles that you set overwrite settings for that style in previously loaded style sheets.

But is there a way to remove a style that was set in a previously loaded style sheet? For example, suppose I include bootstrap in my project, which has this style:

.tab-content {
    overflow: auto;
}

And this style is causing some undesirable effects, so I want to get rid of it. I could of course set it to some desirable value in my own style sheet, but I'd rather if it were simply as though that style were never there.

Upvotes: 1

Views: 113

Answers (2)

pwdst
pwdst

Reputation: 13735

There is no way to remove CSS rules or properties set in a previous stylesheet (or indeed within the same stylesheet) but you can override these with styles of your own.

These must appear after the original rules (in the case that the selectors have the same specificity - see CSS Specificity: Things You Should Know) or with a higher specificity than the preceding rule.

For example-

.tab-content {
    overflow: auto;
}
...

.tab-content {
    overflow: inherit;
}

Would work, but-

#foo.tab-content {
    overflow: auto;
}
...

.tab-content {
    overflow: inherit;
}

Would not be overridden and the original auto value would stand. If you want to understand about specificity then the Specificity Calculator by Keegan Street is well worth experimenting with after reading the above article.

If you can remove the original rule and it isn't needed elsewhere then it's always best to get rid of it rather than simply tack on new replacement values, but assuming it is used elsewhere in the site or part of third party content (as with bootstrap) that you can't or don't want to change then you can just reset it to the default or desired value. In the case of "overflow" the default value is "visible" (see https://developer.mozilla.org/en-US/docs/CSS/overflow). If the rule is only needed in your content then you may want to include that in the selector to avoid affecting other parts of the page/site-

#your-container .tab-content {
   overflow: visible;
}

Upvotes: 2

Eric
Eric

Reputation: 6016

I don't know CSS very well, but as I was writing this question, the solution occurred to me. By simply setting the style to inherit in my subsequent CSS file, I can emulate the default behavior so that it is as thought the style had never been set.

.tab-content {
    overflow: inherit;
}

Upvotes: 0

Related Questions