Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!

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:

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

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

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}">

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

<span class="cell" class:selected>

Download my free Svelte Handbook

The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!

More svelte tutorials: