Conditional classes (class:name) in Svelte - Step-by-Step Execution

Concept Flow - Conditional classes (class:name)

Start Component Render

↓

Evaluate Condition

↓

Add class:name

↓

Render Element with Classes

↓

End Render

The component checks a condition during rendering. If true, it adds the class; if false, it skips it. Then it renders the element with the correct classes.

Execution Sample

Svelte

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

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

This code adds the 'active' class to the div only if isActive is true.

Execution Table

Step	Condition (isActive)	Action	Classes on <div>
1	true	Add class 'active'	active
2	false	Do not add class 'active'

💡 Rendering ends after applying classes based on isActive value

Variable Tracker

Variable	Start	After Step 1	After Step 2
isActive	true	true	false

Key Moments - 2 Insights

Why does the class 'active' disappear when isActive changes to false?

Because the condition is false at step 2 in the execution_table, so Svelte removes the 'active' class from the element.

What happens if the condition is not a boolean but a truthy or falsy value?

Svelte treats any truthy value as true and adds the class, and any falsy value as false and removes the class, as shown in the condition evaluation step.

Visual Quiz - 3 Questions

Look at the execution_table, what classes does the <div> have at step 1?

A active

B none

C inactive

D active inactive

💡 Hint

Check the 'Classes on

' column in row for step 1 in execution_table

At which step does the condition become false and the class is removed?

A Step 1

B Never

C Step 2

D Before Step 1

💡 Hint

Look at the 'Condition (isActive)' column in execution_table to find when it is false

If isActive was set to a non-empty string instead of true, what would happen to the class?

A Class 'active' would be removed

B Class 'active' would be added

C Error occurs

D Class 'active' toggles randomly

💡 Hint

Refer to key_moments about truthy and falsy values affecting class addition

Concept Snapshot

Svelte conditional classes use syntax: class:name={condition}
If condition is true, class 'name' is added to the element.
If false, the class is removed.
Works with any truthy/falsy value.
Useful for toggling styles based on state.

Full Transcript

This visual trace shows how Svelte adds or removes a CSS class based on a condition. When the component renders, it checks if the condition is true. If yes, it adds the class to the element. If no, it leaves the class off. The execution table shows two steps: first with the condition true, adding the class, and second with the condition false, removing it. The variable tracker shows how the condition variable changes. Key moments clarify why the class disappears when the condition is false and how truthy/falsy values affect the class. The quiz tests understanding of class presence at each step and behavior with different condition values. This helps beginners see exactly how conditional classes work in Svelte.

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