Classes

Like any other attribute, you can specify classes with a JavaScript attribute, seen here:

<button
	class="{current === 'foo' ? 'selected' : ''}"
	on:click="{() => current = 'foo'}"
>foo</button>

This is such a common pattern in UI development that Svelte includes a special directive to simplify it:

<button
	class:selected="{current === 'foo'}"
	on:click="{() => current = 'foo'}"
>foo</button>

The selected class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.



			
loading editor...

Console

loading Svelte compiler...


			
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


			
loading editor...