# How to dynamically apply CSS in Svelte

> Learn how to dynamically apply CSS in Svelte by toggling a class based on a variable, using the class:name directive and its concise shorthand syntax.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-08-05 | Updated: 2020-08-11 | Topics: [Svelte](https://flaviocopes.com/tags/svelte/) | Canonical: https://flaviocopes.com/svelte-dynamically-apply-css/

I had the need to dynamically apply some [CSS](https://flaviocopes.com/page/css-handbook/) properties to an element, using [Svelte](https://flaviocopes.com/svelte-getting-started/), 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:

```html
<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:

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

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

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