Conditional classes (class:name) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What class is applied when isActive is true?

Consider this Svelte snippet:

<script>
  let isActive = true;
</script>

<div class:active={isActive}>Hello</div>

Which class will the <div> have when isActive is true?

Svelte

<script>
  let isActive = true;
</script>

<div class:active={isActive}>Hello</div>

A The div will have no classes.

B The div will have the class 'true'.

C The div will have the class 'inactive'.

D The div will have the class 'active'.

💡 Hint

Think about how class:name={condition} works in Svelte.

When isActive is true, the class active is added to the element.

❓ state_output

intermediate

What classes are applied after toggling isError?

Given this Svelte component:

<script>
  let isError = false;
  function toggle() {
    isError = !isError;
  }
</script>

<button on:click={toggle}>Toggle Error</button>
<div class:error={isError} class:ok={!isError}>Status</div>

What classes does the <div> have after clicking the button once?

Svelte

<script>
  let isError = false;
  function toggle() {
    isError = !isError;
  }
</script>

<button on:click={toggle}>Toggle Error</button>
<div class:error={isError} class:ok={!isError}>Status</div>

A The div has class 'error'.

B The div has class 'ok'.

C The div has classes 'error ok'.

D The div has no classes.

💡 Hint

Clicking toggles isError from false to true.

Initially, isError is false, so the div has class ok. After toggling once, isError becomes true, so the div has class error only.

📝 Syntax

advanced

Which option causes a syntax error in conditional class usage?

Identify the option that will cause a syntax error in Svelte when using conditional classes.

A &lt;div class:active={isActive}&gt;Content&lt;/div&gt;

B &lt;div class:active=isActive&gt;Content&lt;/div&gt;

C &lt;div class:active={isActive ? true : false}&gt;Content&lt;/div&gt;

D &lt;div class:active={isActive && true}&gt;Content&lt;/div&gt;

💡 Hint

Check the syntax for binding class names conditionally in Svelte.

Option B misses the curly braces around the expression, causing a syntax error. The correct syntax requires curly braces for the condition.

🔧 Debug

advanced

Why does the class not toggle as expected?

Consider this Svelte code:

<script>
  let isVisible = false;
  function toggle() {
    isVisible == !isVisible;
  }
</script>

<button on:click={toggle}>Toggle</button>
<div class:visible={isVisible}>Show me</div>

Why does clicking the button not toggle the visible class?

Svelte

<script>
  let isVisible = false;
  function toggle() {
    isVisible == !isVisible;
  }
</script>

<button on:click={toggle}>Toggle</button>
<div class:visible={isVisible}>Show me</div>

A Because '==' is used instead of '=' in the toggle function.

B Because the class name 'visible' is not defined in CSS.

C Because the button does not have a click event.

D Because 'isVisible' is not declared as reactive.

💡 Hint

Look carefully at the assignment inside the toggle function.

The toggle function uses '==' which is a comparison operator, not assignment. It should use '=' to update the variable.

🧠 Conceptual

expert

What is the final class list on the element?

Given this Svelte snippet:

<script>
  let isRed = true;
  let isBlue = false;
  let isGreen = true;
</script>

<div class:red={isRed} class:blue={isBlue} class:green={isGreen}>Colors</div>

What classes will the <div> have when rendered?

Svelte

<script>
  let isRed = true;
  let isBlue = false;
  let isGreen = true;
</script>

<div class:red={isRed} class:blue={isBlue} class:green={isGreen}>Colors</div>

A The div has no classes.

B The div has classes 'red blue green'.

C The div has classes 'red green'.

D The div has class 'blue'.

💡 Hint

Only classes with true conditions are applied.

Since isRed and isGreen are true, their classes are added. isBlue is false, so 'blue' is not added.