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?
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.
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.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With