Skip to content

How to dynamically apply CSS in Svelte

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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 simplest 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 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>

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

<span class="cell" class:selected>
  {value}
</span>
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)