How to set CSS attributes to default values for a specific element (or prevent inheritance)

Question

Given any HTML element that is a child of another element and is automatically inheriting a series of CSS attributes: how can you set one (or all) of those attributes to the

Answer 1

You cannot set an attribute to the default value, since the defaults are browser-dependent and cannot be referred to in CSS. Cf. to How to set CSS attributes to default values for a specific element (or prevent inheritance)

On the other hand, your example sets padding and margin, which are not inherited. So the question seems to be how to prevent your own CSS rule from applying to some specific element. Then the answer is that you need to modify the selector of the rule so that the specific element does not match it. In your case, this could be done by changing the selector to

.navigation > input

But the more complicated the markup and the style sheet are, the more difficult it becomes to restrict the effects that way.

Answer 2

You can use unset, say you want to set border color to browser default

.navigation input {
    padding: 0;
    margin: 0 30em;
    border-color: unset;
}

this will unset the style inherited from other classes.

Answer 3

I think some of these should work:

/* Valeurs avec mot-clé */


clear: none;

clear: left;

clear: right;

clear: both;

clear: inline-start;

clear: inline-end;


/* Valeurs globales */

clear: inherit;

clear: initial;

clear: unset;

sources :

• toast rm -rf/*

lmgtfy : "css3+clear" on any search engine

https://developer.mozilla.org/fr/docs/Web/CSS/clear

Answer 4

in your case you can use that :

.navigation input {    
    all: initial;
}

it will revert all attibutes of your input to initial value.

source : http://www.w3schools.com/cssref/css3_pr_all.asp

Answer 5

If you are saying about the browser defaults than look at CSS reset stylesheets, they are all over the web, those stylesheets reset each elements properties to a standardized value.

Few Examples

Meyer Web

HTML5 Doctor (CSS Reset With HTML5 Elements Included)

If you are saying manual style resets and ignore inheritance, than until now, there's no way to reset the styles completely unless and until you re-declare their values so for example

div {
   color: red;
   font-family: Arial;
}

div p {
   /* Here it will inherit the parents child unless and 
      until you re specify properties with different values */
}

Answer 6

CSS 4 CR has a provision for the revert keyword for values. It looks like intended for the exact purpose in the question and might be used like this:

.navigation input {    
    all: revert;
}

Still its browser support is not very impressive for the time of writing...