What is the currentColor attribute in CSS?
What is the purpose of this attribute and what is the best way to use it? I would like some examples to understand better.
If the element does not have a color or if the color is in the parent, how can I use currentColor in the child ... In short how does it work and how can I apply this attribute?
It is not an attribute, currentColor is a keyword that is used in CSS attributes, since CSS1 and CSS2 can be used in borders (in border-color ), which it does is that the set property receives the same font color as defined in the element or 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>See that the borders assume the same color used in the fonts.
Note that I can not omit the color, which CSS will assume you are using border , eg
.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: link
Of course other properties currently support currentColor , for example, you can use to apply the same font color and a currentColor or box-shadow , examples:
text-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> box-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 that I have adopted in my framework is to create / simulate arrows for menus dropdowns for navbars or combobox simulated as text-shadow , stayed like this (I'm just going to bring the part that is relevant to the same learning) :
[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>