svelte/site/content/guide/11-classes.md

title
Classes

Like any attribute, the class attribute can be set using regular JavaScript. Suppose we had an active class that we wanted to apply to an element when isActive is true — we could do it like this:

<!-- { title: 'Dynamic classes using ternaries' } -->
<script>
	let isActive = false;
</script>

<style>
	.active {
		color: red;
	}
</style>

<h1 class="{isActive ? 'active' : ''}">red if active</h1>

<label>
	<input type=checkbox bind:checked={isActive}> isActive
</label>

That's a little verbose though, so the class: directive gives you a simpler way to achieve the same thing:

<!-- { title: 'Dynamic classes using directives' } -->
<script>
	let isActive = false;
</script>

<style>
	.active {
		color: red;
	}
</style>

-<h1 class="{isActive ? 'active' : ''}">red if active</h1>
+<h1 class:active={isActive}>red if active</h1>

<label>
	<input type=checkbox bind:checked={isActive}> isActive
</label>

As with any directive, you can use any JavaScript expression. If it's a variable name that matches the class name, you can use a shorthand:

<!-- { title: 'Dynamic classes using directives' } -->
<script>
-	let isActive = false;
+	let active = false;
</script>

<style>
	.active {
		color: red;
	}
</style>

-<h1 class:active={isActive}>red if active</h1>
+<h1 class:active>red if active</h1>

<label>
-	<input type=checkbox bind:checked={isActive}> isActive
+	<input type=checkbox bind:checked={active}> active
</label>