How to dynamically apply CSS in Svelte
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 wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025