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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

20

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 27, 2010 at 15:34

ЯegDwight

25.3k10 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sophie88 · Accepted Answer · 2010-01-27 15:31:50Z

7

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

answered Jan 27, 2010 at 15:31

Sophie88

3671 gold badge3 silver badges7 bronze badges

3 Comments

Tom Over a year ago

"without overriding the element style attributes with inline styles"

Sophie88 Over a year ago

damn answering these question is harder than i expected :(

Tom Over a year ago

Meh, I do things like that all the time, rushing to be the first answer. Gets easier with practice, I guess.

simon · Accepted Answer · 2016-06-01 12:56:51Z

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.

answered Jun 1, 2016 at 12:56

simon

13k27 gold badges83 silver badges117 bronze badges

Comments

Tom · Accepted Answer · 2010-01-27 15:33:04Z

2

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

answered Jan 27, 2010 at 15:33

Tom

22.9k5 gold badges67 silver badges97 bronze badges

Comments

prodigitalson · Accepted Answer · 2010-01-27 15:35:27Z

2

<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.

answered Jan 27, 2010 at 15:35

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Comments

user193130 · Accepted Answer · 2013-11-20 20:15:31Z

0

You can use the :not selector:

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

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

edited Nov 20, 2013 at 20:15

answered Nov 20, 2013 at 20:07

user193130

8,3074 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related