var

Summary

Allows authors to reference the value of a custom property for cascading variables.

Syntax

• var ( <custom-property> )
• var ( <custom-property>, <default-value> )

Parameters

custom-property

The name of the custom property to use.

default-value

A value to use when the custom property isn’t defined.

Examples

.block .header {
    /* use a variable for the text color of the header, with default 'blue' */
    color: var(--header-color, blue);

    /* use a variable for the background color of the header, with default 'blue' */
    background-color: var(--text-color, blue);

    padding: 1em;
}

.block .contents{
    /* use a variable for the text color of the contents, with default 'red' */
    color: var(--text-color, red);
    padding: 1em;
}

.block{
    /* only the --text-color variable is set, so the --header-color will show it's default 'blue' */
    --text-color: green;
}

View live example

Related specifications

CSS Custom Properties for Cascading Variables Module Level 1

W3C Last Call Working Draft