How can I remove CSS element style inline (without JavaScript)?

Question

I have a style assigned for a specific HTML element in my stylesheet file, like this

label {
  width: 200px;
  color: red; 
}

In one special case, I would like to use a label element in the HTML document, but ignore the style specified for the label element (just for one instance in the document). Is there any way to achieve this in a generic way without overriding the element style attributes with inline styles?

<label for="status">Open</label>

To reiterate, to the HTML code displaying the label the element style (width 200 px, color red) is applied. I would like the default style attributes to be used (without knowing what they are) and without having to know what is specifically specified in the element style setting.

Answer 1

From the Mozilla developer center:

Because CSS does not provide a "default" keyword, the only way to restore the default value of a property is to explicitly re-declare that property.

Thus, particular care should be taken when writing style rules using selectors (e.g., selectors by tag name, such as p) that you may want to override with more specific rules (such as those using id or class selectors), because the original default value cannot be automatically restored.

Because of the cascading nature of CSS, it is good practice to define style rules as specifically as possible to prevent styling elements that were not intended to be styled.

Answer 2

  <label ... style = "width: auto; color: inherit" />

Answer 3

<label ... class="default">...</label>


label {
  width: 200px;
  color: red; 
}

label.default {
  width: auto;
  color: inherit; 
}

however that may not provide the desired results - the other way would be to give all the other labels a particluar class(es) and then not assign that class to the "default" label.

Answer 4

The situation has somewhat changed in 6 years: now it is possible to remove a set CSS property without using JavaScript by using the initial, unset or revert keywords. These are supported in all modern browsers.

Answer 5

I don't think you can reset it to what it was before the label definition in the stylesheet, but you could give the label an id and override it in your stylesheet.

<label for="status" id="status-label">Open</label>

label {
  width: 200px;
  color: red; 
}

label#status-label {
  width: auto;
  color: blue; 
}

Answer 6

You can use the :not selector:

label:not([for="status"]) {
  width: 200px;
  color: red; 
}

Support seems to date back to around 2009 (FF3.5)