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