← flaviocopes.com

How to dynamically apply CSS in Svelte

Updated Aug 11 2020

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

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>


I write books for developers 👇🏼

© 2023 Flavio Copes Flavio Copes made in Italy 🇮🇹 using Notion to Site Notion to Site