Is it possible to reset all inherited CSS propeties?

Question

How do you reset ALL inherited properties for a class in a CSS file? I need to be able to set new properties on elements without pre-defined properties having an effect on i

Answer 1

Simple answer - you can't.

Unless you override ALL the properties with something more specific, you cannot do this efficiently. This is extremely redundant, and I don't suggest doing it.

Instead you should avoid this completely. Don't set properties in the first place and you won't have this problem.

Also, don't do what other are suggesting and use !important this is a bad practice.

Answer 2

A class can't inherit properties. Inheritance is done through the DOM tree from the parent element. This will only happen if the default style for an element is to inherit, or if you have explicitly said some-property: inherit;.

If you are asking how to stop rules from CSS rulesets that have selectors which match a given element from applying, then you can use the initial value. Note that:

• It is from a working draft specification, so browser support may be weak to non-existent (I haven't see any documentation or performed any tests on support levels for it)
• You still need to use a more specific selector (or some other method to win the cascade) for it to override any other styles.

You'd probably be best off rewriting your stylesheet to be less broad in the elements it affects in the first place though. That approach will certainly have the best browser support.

Answer 3

You cannot reset css properties, you can overwrite your css properties one by one, nothing automatic so far.

* {
    property:inherit
    ...
    ... long list of all .css properties ...
    propertyZ:inherit
}

and maybe (wishing)) comming soon :initial

See this answer : Reset/remove CSS styles for element only

Answer 4

You Cant reset properties, as they will always be inherited

You can surely Override them by using !important

ex:

childselector
{
   height:auto !important;
}