Conditional classes (class:name) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does class:name={condition} do in Svelte?

It adds the CSS class <code>name</code> to the element only if <code>condition</code> is true. If false, the class is not added.

beginner

How do you apply multiple conditional classes in Svelte?

You write multiple <code>class:name={condition}</code> attributes on the same element, each controlling one class based on its condition.

intermediate

Can you use expressions inside the condition of class:name={condition}?

Yes, you can use any JavaScript expression that evaluates to true or false inside the curly braces to control the class application.

intermediate

What happens if the condition in class:name={condition} changes during runtime?

Svelte automatically updates the element's classes to add or remove the class name based on the new condition value.

beginner

Why is using class:name={condition} better than manually toggling classes with JavaScript in Svelte?

Because it keeps your code clean, declarative, and reactive. Svelte handles class changes automatically without extra code.

What does class:active={isActive} do in Svelte?

A Removes the class 'active' if isActive is true

B Adds the class 'active' only if isActive is true

C Always adds the class 'active'

D Adds the class 'isActive' instead of 'active'

The syntax adds the class 'active' only when the condition is true.

How can you add two conditional classes 'red' and 'bold' based on variables in Svelte?

A <div class={isRed ? 'red' : ''} class={isBold ? 'bold' : ''}>

B <div class='red bold' if={isRed && isBold}>

C <div class:red={isRed} class:bold={isBold}>

D <div class:red, bold={isRed && isBold}>

You add multiple class directives separately for each class and condition.

If class:highlight={score > 50} is used, when is the 'highlight' class applied?

A When score is greater than 50

B When score is less than 50

C Always

D Never

The class is added only if the condition (score > 50) is true.

What happens if the condition in class:name={condition} changes from true to false?

A The class 'name' is removed from the element

B The class 'name' stays on the element

C An error occurs

D The class 'name' is added twice

Svelte removes the class automatically when the condition becomes false.

Which is a benefit of using class:name={condition} in Svelte?

A Only works with static classes

B Slower performance

C Requires manual DOM updates

D Cleaner and reactive class management

It makes class toggling easy and reactive without manual DOM manipulation.

Explain how to use conditional classes in Svelte and why it helps with reactive UI.

Think about how Svelte updates classes when variables change.

Describe how you would add multiple conditional classes to an element in Svelte.

Remember each class gets its own class:name attribute.