1

I saw the below code on the Mozilla site on the section explaining the inheritance in CSS

I understand why the first two link colors are blue and green, however why does the third one change color to black and the fourth one to green? I think I don't really understand the purpose of initial and unset attributes nor the difference between them and the explanation on the Mozilla site is enigmatic to me. Can someone please explain this to me?

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
hanu123
  • 11
  • 1
  • unset is equivalent to inherit for color and initial is the initial value set for color (most of the case black) – Temani Afif Nov 11 '19 at 09:01
  • **inherit**: Get the property from the parent element. **initial**: The default value for the property (the browser default). **unset**: Acts as either inherit or initial. It’ll act as inherit if the parent has a value that matches, or else it will act as initial. – Debs Nov 11 '19 at 10:26
  • 3rd one is black because it takes the initial browser default value and 4th one is green as in this case unset acts as inherit because there is a parent with a matching value. – Debs Nov 11 '19 at 10:32
  • @Debs initial is not the browser default but the default value specified by the specification – Temani Afif Nov 11 '19 at 12:05
  • @TemaniAfif So isn't the default link color blue? Why does it change to black then? – hanu123 Nov 12 '19 at 18:52
  • the default color set by the browser for links is blue and initial doesn't consider this, it consider the intial value set by the specification and it's black. If you use `display:initial` with `div` you will see that the div will inline and not block even if the default value set by the browser for div is block BUT the initial value for display is inline – Temani Afif Nov 12 '19 at 19:15

0 Answers0