Languages
[Edit]
EN

CSS - currentColor keyword

0 points
Created by:
Marley-Marks
442

In this article, we would like to show you how to use the currentColor keyword in CSS.

Quick solution:

p {
  color: currentColor;
}

div {
  color: red;  /* all p elements inside the div will be red now */
}

 

Practical example

In this example, we use the currentColor to inherit the value of the color property from the parent div elements.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <head>
    <style>
      
      p {
        color: currentColor;
      }

      .red {
        color: red;
      }

      .blue {
        color: blue;
      }

    </style>
  </head>
  <body>
    <div class="red">
      <p> In this paragraph currentColor is red. </p>
    </div>
    <div class="blue">
      <p> In this paragraph currentColor is blue. </p>
    </div>
  </body>
</html>

References

  1. <color> - CSS: Cascading Style Sheets | MDN
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join