CSS Overriding Variables

Override Global Variable With Local Variable

From the previous page we have learned that global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.

Look at the example from the previous page:

Sometimes we want the variables to change only in a specific section of the page.

Assume we want a different color of blue for button elements. Then, we can re-declare the --blue variable inside the button selector. When we use var(--blue) inside this selector, it will use the local --blue variable value declared here.

We see that the local --blue variable will override the global --blue variable for the button elements:

Add a New Local Variable

If a variable is to be used at only one single place, we could also have declared a new local variable, like this:

Browser Support

The numbers in the table specify the first browser version that fully supports the var() function.

CSS var() Function