2

I am reading this link and must say Mozilla is not trying to explain things! https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

So in the screenshot below, you see the default link has a different color than initial link. Default is just element without any properties so it should inherit colour from browser's stylesheet. Cool. But the initial link should also inherit the blue color from browser default stylesheet, and instead, we have black. Please help understand.

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>

enter image description here

disinfor
  • 10,865
  • 2
  • 33
  • 44
Dariusz Biskupski
  • 23
  • 3

1 Answers1

1

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:

enter image description here

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:

enter image description here

disinfor
  • 10,865
  • 2
  • 33
  • 44
  • Thanks @disinfor, QQ - What does it mean then internal value is the default colour as here a has specified default color not as black but as internal value which should be the browser's stylesheet which is blue...: https://www.w3schools.com/cssref/css_default_values.asp – Dariusz Biskupski May 06 '20 at 20:44
  • 1
    Because it's actually the `:link` selector that relies on the browser CSS, not the `a`. The `a` tag has no internal value set, so it will output as black. If you look the two screenshots in my answer, you can see that for the `initial` setting, the `*|*:link` is crossed out, because `a` was set to `initial` - again...there is no initial "color" so it is automatically `rgb(0,0,0)`. For the link you sent, it lists the selector as `a:link` and that DOES have a browser setting (the blue). – disinfor May 06 '20 at 22:14
  • You can actually test this using the `:link` selector - `.my-class-2 a:link { color: initial; }` will be blue, because there is an initial value for `:link` - which is `#0000EE` – disinfor May 06 '20 at 22:18