---
id: 5a9d7295424fe3d0e10cad14
title: Cascading CSS variables
challengeType: 0
videoUrl: ''
localeTitle: Variables CSS en cascada
---
## Description
Cuando creas una variable, queda disponible para que la uses dentro del elemento en el que la creas. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como cascada . Debido a la conexión en cascada, las variables CSS a menudo se definen en el elemento : raíz . :root
es un selector de pseudo-clase que coincide con el elemento raíz del documento, generalmente el
elemento. Al crear sus variables en :root
, estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
## Instructions
Defina una variable llamada --penguin-belly
en el selector de :root
y dale el valor de pink
. Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
## Tests
```yml
tests:
- text: 'declara la variable --penguin-belly
en la :root
y --penguin-belly
a pink
.'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly
variable in the :root
and assign it to pink
.");'
```
## Challenge Seed
## Solution
```js
// solution required
```