CSS’s CurrentColor value is a way to assign a pre-defined color to all of the CSS properties that take color values. All you need to do is define the color of a certain selector like you normally would:
- div{
- color: #333;
- }
After that, you can use the value (which in this context sort of acts as a variable) CurrentColor to define the color value of any property that want to be that dark grey color, rather than writing #333. So for example:
Join us in our newest publication:
- div{
- color: #333;
- border: 1px solid CurrentColor;
- background: 1px solid CurrentColor;
- }
In the above instance, the border color and the background color of the div would both be #333. Using this property might not actually save you any time, but it is a pretty cool trick, and it’s definitely fun to play around with pseudo-variables in our pure CSS.