CSS Custom Property Cascade

CSS Custom properties follow the standard cascade rules. Following example will help you understand it clearly:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --text-color: #06c;
        }

        h1 {
            --text-color: red;
        }

        div {
            --text-color: magenta;
        }

        #d1{
            --text-color: green;
        }

        * {
            color: var(--text-color)
        }
    </style>
</head>

<body>
    <h1>CSS VARIABLES</h1>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sapiente aliquid nobis?
        In asperiores laborum autem, et facilis enim numquam non assumenda nobis eligendi.
        Ullam debitis laboriosam maiores ex voluptate?</div>
    <div id="d1">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt alias error cupiditate 
            voluptatibus!
            Quaerat, ratione placeat.
            Enim voluptas laborum adipisci animi, fuga omnis in unde iure sint incidunt voluptatum itaque?
        </p>
    </div>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
</body>

</html>
Output of the above code

In the example above:

  • Color of the heading h1 is red as variable – – text-color value is red under h1 element selector.
  • Color of the first div is magenta as defined under div element selector
  • Color of the p element under second div is green. As id selector #d1 defines – – text-color as green. Id selector has higher specificity than the element selector div. Element p inherits the property from its parent div i.e. #d1 , its color is also green.
  • Color of the list is blue. There is no color specified for the list separately. By default it takes the color defined under :root pseudo class.
  • Under * universal selector we have mentioned the var() function. Universal selector matches all the elements with the – – text-color variable set for them. var() function retrieves the value of the colors defined by – – text-color variable for all the elements. We do not have to write var() function separately for each element, we just put it under * universal selector.

Leave a Reply

Your email address will not be published.