Question

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?

Answer 1

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;
}