How can I nullify css property?

Question

Basically I have two external css in my page.

The first Main.css contains all style rules but I don't have access to it, and hence I cannot modify it. I have access to a second file Template.css , so I need to override the Main.css's values in template.css.

This is easy for which I have to change the value, but how do I remove a property entirely?

Like say a class .c1 has height: 40px;, how do I get rid of this height property?

https://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only — Joe Barrett, Jun 27 '18 at 21:12

thirtydot · Accepted Answer · 2017-07-04T10:41:56.527

214

You have to reset each individual property back to its default value. It's not great, but it's the only way, given the information you've given us.

In your example, you would do:

.c1 {
    height: auto;
}

You should search for each property here:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

For example, height:

Initial value : auto

Another example, max-height:

Initial value : none

In 2017, there is now another way, the unset keyword:

.c1 {
    height: unset;
}

Some documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or 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.

Browser support is good: http://caniuse.com/css-unset-value

edited Jul 04 '17 at 10:41

answered Mar 07 '11 at 10:49

thirtydot

224,678
48
389
349

3

+1 for the nice answer and reference. I think the link has changed to: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference – Paolo Jun 14 '13 at 09:43
Setting the value to auto doesn't seem to work when there is no initial value ( "initial value: none"). For example, when doing "max-width:auto;" I get a mismatched property value error. What should I do? – user1779563 May 27 '15 at 22:45
3

@user1779563 You set it to "none". – AndreKR Jun 30 '15 at 21:11
1

I would like to thank @simhumileco for [his answer](https://stackoverflow.com/a/43362495/405015) which I have shamelessly stolen since my answer is accepted and people may not scroll down. – thirtydot Jul 04 '17 at 10:42

score 18 · Answer 2 · edited Apr 12 '17 at 07:02

.c1 {
    height: unset;
}

The unset value added in CSS3 also solves this problem and it's even more universal method than auto or initial because it sets to every CSS property its default value and additionally its default behawior relative to its parent.

Note that initial value breaks aforementioned behavior.

From MDN:

Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not.

Pekka · Answer 3 · 2011-03-07T10:54:44.823

11

like say a class .c1 has height:40px; how do I get rid of this height property?

Sadly, you can't. CSS doesn't have a "default" placeholder.

In that case, you would reset the property using

 height: auto;

as @Ben correctly points out, in some cases, inherit is the correct way to go, for example when resetting the text colour of an a element (that property is inherited from the parent element):

a { color: inherit }

edited Mar 07 '11 at 10:54

answered Mar 07 '11 at 10:48

Pekka

442,112
142
972
1,088

3

I'll give +1 to that. There is also the "inherit" value. In some contexes other than height, inherit is more appropriate. – Ben Mar 07 '11 at 10:50
1

@meo you're right. [(Related question)](http://stackoverflow.com/questions/511066/ie7-css-inherit-problem) that seems to mean that there are properties that can't be reset to their default in IE... what a pity – Pekka Mar 07 '11 at 11:02

score 9 · Answer 4 · answered Feb 10 '13 at 13:37

9

An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.

answered Feb 10 '13 at 13:37

RonyK

2,644
5
32
42

FYI: `height:initial;` doesn't appear to work in IE9. – khollenbeck Mar 12 '14 at 20:47
so whats the difference between `initial` and `auto` and `unset` ?. – Exil Aug 28 '17 at 09:38

Nathalia Xavier · Answer 5 · 2017-08-11T13:53:37.373

3

I had an issue that even when I did overwrite "height" to "unset" or "initial", it behaved differently from when I removed the previous setting.

It turned out I needed to remove the min-height property too!

height: unset;
min-height: none

Edit: I tested on IE 7 and it doesn't recognize "unset", so "auto" works better".

edited Aug 11 '17 at 13:53

answered Jul 04 '17 at 09:14

Nathalia Xavier

1,029
10
13

1

For future readers: if "min-height: none;" doesn't work for you, try to nullify min-height property with the value 0. – Jakub Siwiec Sep 06 '20 at 17:18

score 3 · Answer 6 · answered Mar 07 '11 at 10:49

3

To get rid of the fixed height property you can set it to the default value:

height: auto;

answered Mar 07 '11 at 10:49

Richard H

38,037
37
111
138

score 3 · Answer 7 · answered Mar 07 '11 at 10:49

You need to provide a selector with higher specificity than the one in Main.css. With that selector, set the values of the properties you want to their default, e.g.

body .c1 {
    height: auto;
}

There is no "default" value that will work for all properties, you need to look up what the default is for each one and use that.

How can I nullify css property?

7 Answers7

Linked