What's the Difference Between CSS Inherit and Initial

What's the difference between CSS inherit and initial?

The initial value given in the summary of the definition of each CSS property has different meaning for inherited and non-inherited properties.

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.

The inherit keyword means use whatever value is assigned to my parent.

Source : https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value

What is the difference between initial & default in CSS?

The initial state doesn't necessarily pull from the browser's stylesheet.

If the color property, in this instance, is not defined within the element's spec table or there is no definition for that element then it will have an initial property of nothing or in the case of a color value, rgb(0,0,0) - or black.

Anchor (<a>) tags, do not have a defined initial color property, so it will render as rgb(0,0,0);

Here you can see in the dev inspector in the computed tab:

Here you can see an <a> tag is not defined in the spec table.

https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Here's the browser styles being set on the anchor with no color property being defined, so the browser uses it's stylesheet:

What is the difference between the initial and unset values?

According to your link:

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

Here is an example:

pre {  color: #f00;}.initial {  color: initial;}.unset {  color: unset;}

<pre>  <span>This text is red because it is inherited.</span>  <span class="initial">[color: initial]: This text is the initial color (black, the browser default).</span>  <span class="unset">[color: unset]: This text is red because it is unset (which means that it is the same as inherited).</span></pre>

Understanding how initial values work with inherited and non-inherited properties

Initial Value

The initial value of a property is the value assigned to the property in the W3C specification definition.

For example:

If the author or browser do not define this property, then CSS will refer to the initial value.

---

Inherited Properties

For inherited properties, the initial value is used, for the root element only, when no value is specified for the element.

Some CSS properties can inherit their value. Others can not. This behavior is also established in the property definition (see Inherited in image above).

If a property can inherit, that means the property will – in cases where the value has not been specified – take the computed value of that property from the parent.

Because a property that can inherit will always look to the parent for a value when it is not specified, there is no need for the initial value of the property to appear anywhere in the document, except on the root element.

An inheritable property anywhere in the document, no matter how deeply nested, will keep looking up one level for a value, until it reaches the root element. That's why an initial value only needs to exist on the root element.

---

Non-Inherited Properties

For non-inherited properties the initial value is used, for any element, when no value is specified for the element.

Properties that don't inherit will not look to their parent for guidance. Hence, the initial value is applied in all cases when it is not specified.

Why is CSS style specfiied by the initial keyword different from the default style?

The initial value reset the style to its very initial state. the blue color of the link is not it's original style, but this style given it from the browser user agent. but the initial reset it to the original color, which it black;

In the image above: The styles given to a from the browser user-agent

What's the difference between { color: inherit } vs { color: currentColor }?

inherit means that the value used by the parent is used.

currentColor follows closest color property value,

Example 1

this divs border-color and box-shadow color will be red. Because currentColor follows closest color property value.

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

Example 2

this divs border-color and box-shadow color will be blue. Because the closest color property value is defined in the body and its blue.

body {
  color: blue;
}

body > div { 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

How does CSS inherit behave?

it is because the initial color of attrubutes are black, same with

here is an example from w3schools where they set the color of the division to red, but using initial resets h1 to the base color of attributes.

div {    color: red;}
#initialH1Color {    color: initial;}

<div><h1 id="initialH1Color">this will be initial color</h1><h1>this will be div color: red</h1></div>

What's the difference between `all: unset` and `all: revert'

From the MDN:

The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

So unset is either inherit or initial

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

Suppose the browser apply a default style to your element. Using revert, you will put back those styles while unset will not.

Example:

p {  margin: 50px;}

<p style="margin:revert">  some text here</p><p style="margin:unset">  some text here</p>

D difference between z-index's auto and inherited in CSS3

z-index is not inherited; the default value for every element is auto. If you change it to be inherit then it will grab the value from its parent directly.

The key is that auto does not create a new local stacking context, while inherit, if the parent had any numerical value, will indeed.

Please check this example to get a better understanding. You can see the same DOM structure is duplicated. On the first scenario, div auto comes before inherit and on the other one; it's inverted.

You can see that the inherit value works equally as actually setting z-index: <number> equal to the parent, while auto is the default value that does not create a new stacking order and will simply display on the default z order as per determinated on the DOM. If you make the parent's value -1, then the inheritance will be exactly as if you set z-index: -1 on .inherit making it display behind .auto on both divs.

$('#button0').click(function(e){  $('.parent').css('z-index', '0');});$('#button1').click(function(e){  $('.parent').css('z-index', '1');});$('#button-1').click(function(e){  $('.parent').css('z-index', '-1');});

.parent{  position: relative;  z-index: 1;}.parent > div{  position: absolute;}.auto{  z-index: auto; /* default value */}.inherit{  z-index: inherit;  }
/* --------------------- *//* presentational styles */.auto{  background: green;}.inherit{  top: 100px;  background: red;}.parent{  width: 200px;  height: 200px;  opacity: 1;  margin: 10px;  background: yellow;  display: inline-block;}.parent > div{  width: 100px;  height: 100px;  opacity: 0.95;  color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="parent">  first auto and then inherit on DOM  <div class="auto">auto</div>  <div class="inherit">inherit</div></div>
<div class="parent">  first inherit and then auto on DOM  <div class="inherit">inherit</div>  <div class="auto">auto</div></div>
<div>  <label>Change z-index of parent</label>  <button id="button-1">To -1</button>  <button id="button0">To 0</button>  <button id="button1">To 1</button></div>

In CSS, what is the difference between cascading and inheritance?

Inheritance is about how properties trickle down from an element to its children. Certain properties, like font-family inherit. If you set a font-family on the body, that font family will be inherited by all the elements within the body. The same is true for color, but it is not true for background or height which will always default to transparent and auto. In most cases this just makes sense. Why would the background inherit? That would be a pain. What if fonts didn't inherit? What would that even look like?

The cascade is about what take precedence when there is a conflict. The rules of the cascade include:

1. Later properties override earlier properties
2. More specific selectors override less specific selectors
3. Specified properties override inherited properties

And so on. The cascade solves any conflict situations. It is the order in which properties are applied.

---

(update) Specificity is the calculation used to determine selector priority in the cascade. When two selectors apply to the same element, the one with higher specificity takes precedence.

1. Inline styles have a very high specificity (1000)
2. ID's have a specificity of 100
3. classes/attributes and pseudo-classes add 10
4. elements and pseudo-elements add 1

Add up all the parts in a selector chain to determine the total specificity. In case of a tie, the last selector takes precedence.

Of course, that comes with various edge-cases and caveats. One class will always override plain elements, no matter how many. More targeted selectors are given priority over inherited properties from parent selectors. And you can throw out all your calculations if someone used !important — that trumps everything.

---

Related Topics