What is currentColor and how do I use it in CSS?

Question

What is the currentColor attribute in CSS?

What is this attribute for and how best to use it? I would like some examples to better understand.

If the element does not have a color or if the color is in the parent, how can I use the currentColor in the child... In short how it works and how I can apply this attribute?

Answer 1

He’s not an attribute, the currentColor is a key word which is used in CSS attributes, since CSS1 and CSS2 is possible to use in borders (in border-color), what it does is that the property set receives the same font color defined in the element or in a parent element.

An example:

.foo { color: blue; }

.bar { color: red; }

.baz { color: orange; }

.box {
   border: 5px dotted currentColor;
   margin-bottom: 15px;
}

<div class="foo">
   <div class="box">olá mundo!</div>
</div>

<div class="bar">
   <div class="box">olá mundo!</div>
</div>

<div class="baz">
   <div class="box">olá mundo!</div>
</div>

Note that the edges are the same color used in the fonts.

Note that me border you can omit the color, which the CSS will assume is using currentColor, example:

.foo { color: blue; }

.bar { color: red; }

.baz { color: orange; }

.box {
   border: 5px dotted;
   margin-bottom: 15px;
}

<div class="foo">
   <div class="box">olá mundo!</div>
</div>

<div class="bar">
   <div class="box">olá mundo!</div>
</div>

<div class="baz">
   <div class="box">olá mundo!</div>
</div>

Source: https://www.w3.org/TR/2018/REC-css-color-3-20180619/#currentcolor

---

Of course today other properties support the currentColor, for example, you can use to apply the same font color and a box-shadow or text-shadow, examples:

box-shadow

.foo { color: blue; }

.bar { color: red; }

.baz { color: orange; }

.box {
     box-shadow: 3px 3px 3px currentColor;
     margin-bottom: 15px;
}

<div class="foo"> <div class="box">olá mundo!</div> </div>
<div class="bar"> <div class="box">olá mundo!</div> </div>
<div class="baz"> <div class="box">olá mundo!</div> </div>

text-shadow

.foo { color: blue; }

.bar { color: red; }

.baz { color: orange; }

.foo span, .bar span, .baz span {
    text-shadow: 1px 3px 2px currentColor;
}

<div class="foo"> olá <span>mundo!</span> </div>
<div class="bar"> olá <span>mundo!</span> </div>
<div class="baz"> olá <span>mundo!</span> </div>

---

An interesting example I adopted in my "framework" is to create/simulate arrows (Arrows) for dropdown menus for navbars or simulated combobox like border:, was like this (I will only bring the part that is relevant for learning even):

[class^="v-arrow-"], [class*=" v-arrow-"] {
  display: inline-block;
  width: 0;
  height: 0;
  border: .3em solid transparent;
}

.v-arrow-left {
  border-right: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
  border-left: 0;
}

.v-arrow-right {
  border-left: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
  border-right: 0;
}

.v-arrow-up, .v-arrow-down {
  vertical-align: .15em;
  border-top: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
  border-bottom: 0;
}

.v-arrow-up {
  border-bottom: .3em solid currentColor; /*pode omitir o currentColor que terá o mesmo efeito*/
  border-top: 0;
}

/*-- cores nos elementos "pais" --*/

.foo1 { color: red; }
.foo2 { color: pink; }
.foo3 { color: orange; }

Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>

<div class="foo1">
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
</div>

<div class="foo2">
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
</div>

<div class="foo3">
Seta/arrow para cima: <i class="v-arrow-up"></i><br>
Seta/arrow para baixo: <i class="v-arrow-down"></i><br>
Seta/arrow para esquerda: <i class="v-arrow-left"></i><br>
Seta/arrow para direita: <i class="v-arrow-right"></i>
</div>