Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overriding CSS properties that don't have default values

Is it possible in CSS to override a property if that property doesn't have a default value?

For example, say your primary stylesheet defines a border for a particular element:

#element {
  border: 1px solid #000;
}

If you wanted to disable the border from a secondary stylesheet, you could do this:

#element {
  border: none;
}

Assuming the secondary stylesheet was loaded after the primary one, the border: none rule would take precedence and remove the border.

But what if you were trying to override a property that doesn't have a default or null value?

#element {
  position: absolute;
  left: 0;
}

Now say, in your secondary stylesheet, you wanted to do this:

#element {
  right: 0;
  top: 0;
}

And you didn't want any value for left. There's no such thing as left: none;, so...how do you "undeclare" the left property assigned in the primary stylesheet?

like image 711
daGUY Avatar asked Apr 17 '12 21:04

daGUY


People also ask

How do you overwrite property in CSS?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

Can default property value be restored through CSS?

In short, there's no easy way to restore to default values to whatever a browser uses . The closest option is to use the 'initial' property value, which will restore it to the default CSS values, rather than the browser's default styles.

How do you overwrite CSS in HTML?

Override CSS style in HTML (All type CSS) To only way to override inline style is by using ! important keyword beside the CSS rule. Let's see below an example code of it.

How do I restore the default value of a property?

Restoring a Property Value to Its Default Value. Use the --reset parameter on the xconfmanager command to restore one or more properties to their default values. To specify multiple properties in the parameter, separate the properties using a comma.


1 Answers

If I'm reading your question correctly, do you want to, in one stylesheet, "erase" a declaration that you have in another stylesheet, such that the property will compute to the default value?

There's currently no way to reset it to whatever the value a browser uses as the default for a given element. The closest you can get is with the CSS3 initial keyword, which resets a property to its initial/default value according to the spec rather than according to how a browser defines it:

#element {
  left: initial;
  right: 0;
  top: 0;
}

There's not much browser support for it besides in Safari/Chrome and Firefox (as -moz-initial), so your next best alternative is to look up the initial value and hardcode it. For the left property, it's auto (and I believe it's this value for any element in all browsers anyway), so:

#element {
  left: auto;
  right: 0;
  top: 0;
}
like image 129
BoltClock Avatar answered Sep 19 '22 12:09

BoltClock