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.

Practice

1. What does the Svelte syntax class:active={isActive} do in a component?

easy

A. Always adds the CSS class 'active' regardless of isActive value.

B. Adds the CSS class 'active' only if the variable isActive is true.

C. Removes the CSS class 'active' when isActive is true.

D. Adds the CSS class 'active' only if isActive is false.

Solution

1. Step 1: Understand the syntax class:name={condition}

   This syntax adds the CSS class name only when the condition is true.

2. Step 2: Apply to class:active={isActive}

   The class active is added only if isActive is true; otherwise, it is not added.

3. Final Answer:

   Adds the CSS class 'active' only if the variable isActive is true. -> Option B

4. Quick Check:

   Conditional class = Adds class if true [OK]

Hint: class:name adds class only when condition is true [OK]

Common Mistakes:

• Thinking class:name adds class always
• Confusing true and false conditions
• Assuming it removes class when true

2. Which of the following is the correct syntax to conditionally add a CSS class highlight in Svelte when isHighlighted is true?

easy

A. class:highlight = {isHighlighted}

B. class.highlight={isHighlighted}

C. class:highlight={isHighlighted}

D. class={highlight: isHighlighted}

Solution

1. Step 1: Recall correct Svelte conditional class syntax

   The correct syntax is class:name={condition} without spaces around the equals sign.

2. Step 2: Check each option

   class:highlight={isHighlighted} matches the correct syntax exactly: class:highlight={isHighlighted}. Others have syntax errors or invalid formats.

3. Final Answer:

   class:highlight={isHighlighted} -> Option C

4. Quick Check:

   Correct syntax = class:name={condition} [OK]

Hint: No spaces around = in class:name={condition} [OK]

Common Mistakes:

• Adding spaces around = sign
• Using dot instead of colon
• Trying object syntax inside class attribute

3. Given this Svelte code snippet:

<script>
  let isError = false;
</script>

<div class:error={isError} class:success={!isError}>Status</div>

What CSS classes will the <div> have when isError is false?

medium

A. No classes added

B. Only the class error

C. Both classes error and success

D. Only the class success

Solution

1. Step 1: Evaluate class:error={isError} when isError is false

   Since isError is false, the class error is not added.

2. Step 2: Evaluate class:success={!isError} when isError is false

   The expression !isError is true, so the class success is added.

3. Final Answer:

   Only the class success -> Option D

4. Quick Check:

   Negation adds success class when isError is false [OK]

Hint: Check condition true to add class, false to skip [OK]

Common Mistakes:

• Adding both classes regardless of condition
• Confusing negation operator !
• Assuming false adds class

4. Identify the error in this Svelte code:

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

<button class:active = {isActive}>Click Me</button>

medium

A. There should be no spaces around the equals sign in class:active = {isActive}.

B. The class: directive cannot be used on a <button> element.

C. The class name cannot be active.

D. The variable isActive is not declared.

Solution

1. Step 1: Check variable declaration

   The variable isActive is declared correctly in the script block.

2. Step 2: Check syntax of conditional class

   The syntax class:active = {isActive} has spaces around the equals sign, which is invalid in Svelte. It should be class:active={isActive} without spaces.

3. Final Answer:

   There should be no spaces around the equals sign in class:active = {isActive}. -> Option A

4. Quick Check:

   No spaces around = in class:name={condition} [OK]

Hint: No spaces around = in class:name={condition} [OK]

Common Mistakes:

• Adding spaces around = sign
• Thinking class:name can't be on button
• Missing variable declaration

5. You want to add two conditional classes visible and highlight to a <div> in Svelte. visible should be added when isVisible is true, and highlight only when isHighlighted is also true and isVisible is true.

Which of the following is the correct way to write this?

hard

A. <div class:visible={isVisible} class:highlight={isHighlighted && isVisible}>Content</div>

B. <div class:visible={isVisible} class:highlight={isHighlighted || isVisible}>Content</div>

C. <div class:visible={isVisible && isHighlighted} class:highlight={isVisible}>Content</div>

D. <div class:visible={isVisible} class:highlight={isHighlighted}>Content</div>

Solution

1. Step 1: Understand conditions for each class

   The class visible depends only on isVisible. The class highlight depends on both isHighlighted and isVisible being true.

2. Step 2: Check each option's logic

   <div class:visible={isVisible} class:highlight={isHighlighted && isVisible}>Content</div>

   correctly uses class:visible={isVisible} and class:highlight={isHighlighted && isVisible}, matching the requirements.

   <div class:visible={isVisible} class:highlight={isHighlighted || isVisible}>Content</div>

   uses OR which is incorrect.

   <div class:visible={isVisible && isHighlighted} class:highlight={isVisible}>Content</div>

   swaps conditions incorrectly.

   <div class:visible={isVisible} class:highlight={isHighlighted}>Content</div>

   misses the isVisible condition for highlight.

3. Final Answer:

   <div class:visible={isVisible} class:highlight={isHighlighted && isVisible}>Content</div> -> Option A

4. Quick Check:

   Use && to combine conditions for conditional classes [OK]

Hint: Use && to combine multiple conditions in class:name [OK]

Common Mistakes:

• Using || instead of && for combined conditions
• Swapping conditions between classes
• Omitting one condition in combined class