2

I have seen an example in MDN lesson about inheritance, and I can't understand why the third link's color is black? it should be blue, like a usual link, because the initial value supposes to be the default value!

Thank you for helping me.

Here is the code:

body {
  color: green;
}

.my-class-1 a {
  color: inherit;
}

.my-class-2 a {
  color: initial;
}

.my-class-3 a {
  color: unset;
}
<ul>
  <li>Default <a href="#">link</a> color</li>
  <li class="my-class-1">Inherit the <a href="#">link</a> color</li>
  <li class="my-class-2">Reset the <a href="#">link</a> color</li>
  <li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
ksav
  • 20,015
  • 6
  • 46
  • 66
Jonatan Bar-Hen
  • 23
  • 4

1 Answers1

2

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>

here is an example of inherit

div{
  background: #333;
  border: 5px solid orange;
  color: lime;
}

.initial {
  color: initial;
}

.inherit {
  color: inherit;
}
<div>
  <h1 class="initial">class initial</h1>
  <h1 class="inherit">class inherit</h1>
  <h1>no class</h1>
</div>

as you can see here class inherit and no class are the same color, that is because inherit is the automatic/normal/basic/initial value for color

The inherit keyword specifies that a property should inherit its value from its parent element.

UPDATE

the reason for the a attribute beeing blue by default (which it is not, it is black). is because it is a link. take a look at the example

<a>no href tag = black</a>
<a href="#">has href tag = blue</a>
<a href="#" >same with this one</a>
Stanley
  • 2,434
  • 18
  • 28