How to dynamically apply CSS in Svelte

To dynamically apply CSS in Svelte, you toggle a class on the element with the class: directive, and write the CSS for that class in the component’s <style> block.

Let me show you how I got there.

I had the need to dynamically apply some CSS properties to an element, using Svelte, when one of its variables had a particular value.

The first solution I found was to add an HTML class when the selected variable value was true, and then I wrote some CSS that targeted that element with the class:

<style>
  /* ...other CSS... */
  span.cell.selected {
    outline-color: lightblue;
    outline-style: dotted;
  }
</style>

<span class="cell {selected === true ? 'selected' : ''}">
  {value}
</span>

This works, but the ternary inside the attribute is noisy. It also leaves a stray space in the class value when selected is false, and it gets messy as soon as you need two or three conditional classes on the same element.

The class: directive

This kind of need is so common that Svelte added the ability to bind the class name to a variable value:

<span class="cell" class:selected="{selected}">
  {value}
</span>

Svelte adds the selected class when the variable is truthy, and removes it when it’s falsy. No ternary, no stray spaces.

And in a more concise way, using the shorthand notation:

<span class="cell" class:selected>
  {value}
</span>

The shorthand only works when the variable has the same name as the class. class:selected means “add the selected class when the selected variable is truthy”. If your variable is called isActive and your class is called selected, you need the full form: class:selected={isActive}.

Any expression works

You’re not limited to a boolean variable. Any JavaScript expression goes:

<span class="cell" class:highlighted={value > 100}>
  {value}
</span>

You can also repeat the directive to toggle multiple classes independently:

<span class="cell" class:selected class:highlighted={value > 100}>
  {value}
</span>

Each class gets its own condition, and the markup stays readable.

One nice detail: since the CSS lives in the component’s <style> block, Svelte scopes it to the component. Your .selected rule can’t leak out and accidentally style a .selected element somewhere else in the app.