5

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 it.

Is this possible using only CSS?

I am not talking about a CSS reset, such as:

body {
    margin:0px;
    padding:0px;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Dmitry
  • 14,306
  • 23
  • 105
  • 189
  • I answered this question a few months ago here on Stackoverflow. Search it. – Milche Patern Sep 18 '13 at 16:54
  • 2
    Yes : http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only/15903168#15903168 – Milche Patern Sep 18 '13 at 17:03
  • 1
    You need to define what you mean by “reset”, “inherited properties”, “for class”, and “exactly defined properties”. (No need to defined “class element”; there is no such thing.) Most importantly, reset to *what*?? – Jukka K. Korpela Sep 18 '13 at 17:16

4 Answers4

5

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.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • I have content-edited control (the popular formatted text editor) and the `

    ` tag doesn't work on it because of inherited css properties. And I don't know what's property I need to override to fix the issue.

     – Dmitry Sep 18 '13 at 16:55
  • 1
    @Altaveron, this is the kind of information that should be on the Question itself. – brasofilo Sep 18 '13 at 17:23
  • @Josh Crozier interesting, I did not know that! Why is using the `!important` override some values here and there a bad practice? I want to learn. Searched SO but did not find anything. I'm tempted to ask a new question here about _"Why is CSS !important considered bad practice?"_ but fear downvotes and close votes. Perhaps I should do it nevertheless?! Thanks. – Sam Jun 07 '22 at 21:07
  • Fortunately it _has_ already been asked and has answers: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Sam Jun 07 '22 at 21:15
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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks. But the question is how to set `initial` value to **all** inherited properties. – Dmitry Sep 18 '13 at 16:58
  • You have to specify every property in CSS and give it the value `initial`. – Quentin Sep 18 '13 at 17:07
  • The `initial` value means the value indicated as initial for a property in CSS specifications. For example, for the `display` property, it is `inline` for *all* elements (including headings, table cells, etc.). It is not probable that this is what is really asked for, or needed. – Jukka K. Korpela Sep 18 '13 at 17:18
2

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

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
1

You Cant reset properties, as they will always be inherited

You can surely Override them by using !important

ex:

childselector
{
   height:auto !important;
}
Vinay Pratap Singh Bhadauria
  • 9,829
  • 3
  • 28
  • 49