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.