Page 125 - CSS

Notes

• A saturation of 0% always produces a grayscale color; changing the hue has no effect.

• A lightness of 0% always produces black, and 100% always produces white; changing the
hue or saturation has no effect.

currentColor

currentColor returns the computed color value of the current element.

Use in same element

Here currentColor evaluates to red since the color property is set to red:

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

In this case, specifying currentColor for the border is most likely redundant because omitting it
should produce identical results. Only use currentColor inside the border property within the same
element if it would be overwritten otherwise due to a more specific selector.

Since it's the computed color, the border will be green in the following example due to the second
rule overriding the first:

div {
color: blue;
border: 3px solid currentColor;
color: green;
}

Inherited from parent element

The parent's color is inherited, here currentColor evaluates to 'blue', making the child element's
border-color blue.

.parent-class {
color: blue;
}

.parent-class .child-class {
border-color: currentColor;
}

currentColor can also be used by other rules which normally would not inherit from the color

https://riptutorial.com/ 103