Variable scope in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CSS Variable Scope

Consider the following CSS code. What color will the text inside the <div class='child'> be?

CSS

:root {
  --main-color: blue;
}
.parent {
  --main-color: red;
  color: var(--main-color);
}
.child {
  color: var(--main-color);
}

A The text will be blue because :root variables override local ones.

B The text will be black because the child does not define its own variable.

C The text will be red because the child inherits the parent's variable value.

D The text will be transparent because the variable is undefined in the child.

💡 Hint

Remember that CSS variables cascade and inherit from their closest ancestor that defines them.

The .child element inherits the --main-color variable from its closest ancestor with that variable defined, which is .parent. So the color is red.

📝 Syntax

intermediate

CSS Variable Scope Syntax Error

Which option contains a syntax error that prevents the CSS variable from being applied correctly?

CSS

:root {
  --main-bg-color: lightgray;
}
.container {
  --main-bg-color: white
  background-color: var(--main-bg-color);
}

A Variables cannot be defined inside classes, only in :root.

B Missing semicolon after <code>--main-bg-color: white</code> in <code>.container</code> block.

C Using <code>var(--main-bg-color)</code> instead of <code>var(main-bg-color)</code> causes error.

D Background color property should be <code>background</code> not <code>background-color</code>.

💡 Hint

Check punctuation carefully inside CSS blocks.

CSS requires semicolons after each declaration. Missing semicolon after --main-bg-color: white causes the next line to be invalid.

❓ rendering

advanced

Effect of Variable Scope on Nested Elements

Given this CSS, what background color will the <div class='nested'> have?

CSS

:root {
  --bg-color: yellow;
}
.outer {
  --bg-color: green;
  background-color: var(--bg-color);
}
.nested {
  background-color: var(--bg-color);
}

A Green, because .nested inherits from .outer if nested inside it.

B Yellow, because :root variable applies globally.

C Transparent, because .nested does not define the variable itself.

D Blue, because default background color is blue.

💡 Hint

CSS variables cascade down the DOM tree from the closest ancestor that defines them.

If .nested is inside .outer, it inherits --bg-color as green, so background is green.

❓ selector

advanced

CSS Variable Scope with Multiple Selectors

Which selector correctly limits the scope of the CSS variable --text-color to only .section elements?

A

:root {
  --text-color: red;
}
.section {
  color: var(--text-color);
}

B

.section {
  --text-color: red;
}
.article {
  color: var(--text-color);
}

C

.section {
  --text-color: red;
  color: var(--text-color);
}
.article {
  color: var(--text-color);
}

D

:root {
  --text-color: black;
}
.section {
  --text-color: red;
  color: var(--text-color);
}

💡 Hint

Variables defined inside a selector only apply to elements matching that selector and their children.

Option D defines --text-color inside .section, so only .section and its children use red. Other elements use the :root value black.

❓ accessibility

expert

Accessibility Impact of CSS Variable Scope on Color Contrast

You have a CSS variable --text-color defined in :root as dark gray. Inside a .dark-mode container, it is redefined as light gray. Which statement about accessibility and variable scope is correct?

CSS

:root {
  --text-color: #333333;
}
.dark-mode {
  --text-color: #cccccc;
}
p {
  color: var(--text-color);
}

A Text inside <code>.dark-mode</code> will have better contrast on dark backgrounds due to scoped variable override.

B Scoped variables do not affect accessibility because colors are fixed by browser defaults.

C Redefining variables inside containers breaks keyboard navigation accessibility.

D Variables defined in :root override all scoped variables, so no contrast change occurs.

💡 Hint

Think about how variable scope allows different colors in different parts of the page for better readability.

Scoped CSS variables let you change colors inside containers like .dark-mode to improve contrast and readability, which helps accessibility.