remove / reset inherited css from an element

Question

I know this question was asked before, but before marking it as a duplicate, I want to tell you that my situation is a little different from what I found on the internet.

Answer 1

Technically what you are looking for is the unset value in CSS:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case. It can be applied to any CSS property, including the CSS shorthand all.

.customClass {
  /* specific attribute */
  color: unset; 
}

.otherClass{
  /* unset all attributes */
  all: unset; 
  /* then set own attributes */
  color: red;
}

As an alternative:
If possible it is probably good practice to encapsulate the class or id in a kind of namespace:

.namespace .customClass{
  color: red;
}

<div class="namespace">
  <div class="customClass"></div>
</div>

because of the specificity of the selector this will only influence your own classes

It is easier to accomplish this in "preprocessor scripting languages" like SASS with nesting capabilities:

.namespace{
  .customClass{
    color: red
  }
}

Answer 2

As long as they are attributes like classes and ids you can remove them by javascript/jQuery class modifiers.

document.getElementById("MyElement").className = "";

There is no way to remove specific tag CSS other than overriding them (or using another element).

Answer 3

you may use this below option.

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

now , if their any place where you do not want to apply default style you can use 'no_common_style' class as class. ex:

<div class="no_common_style">
  It will not display in red
</div>