In CSS we have a special color value named currentColor
that maybe be unknown to most people.
What currentColor
does is to take the value for the color
property and use it for any other property there has a color parameter.
For example the following:
.red-box {
color: red;
border: 2px solid red;
box-shadow: 5px 10px red;
}
Is the same as having:
.red-box {
color: red;
border: 2px solid currentColor;
box-shadow: 5px 10px currentColor;
}
It provides us with increased flexibility for our CSS. We just have to change the color in one place. Think of it as a CSS variable for colors only.
And it works even with inherited values too. For example:
body {
color: blue;
}
p {
border: 1px solid currentColor;
/* will create paragraphs with a blue border */
}
Hoever, keep in mind that the rules of cascading apply also here. If we have an inherited value and we set a new color for the child, that new value will have priority.
And it works even with inherited values too. For example:
body {
color: blue;
}
p {
border: 1px solid currentColor;
color: red;
/* will create paragraphs with a RED border */
}
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.