diff --git a/site/content/tutorial/13-classes/01-classes/app-a/App.svelte b/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
index 68cb642463..baa2543562 100644
--- a/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
+++ b/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
@@ -7,23 +7,23 @@
 		display: block;
 	}
 
-	.active {
+	.selected {
 		background-color: #ff3e00;
 		color: white;
 	}
 </style>
 
 <button
-	class="{current === 'foo' ? 'active' : ''}"
+	class="{current === 'foo' ? 'selected' : ''}"
 	on:click="{() => current = 'foo'}"
 >foo</button>
 
 <button
-	class="{current === 'bar' ? 'active' : ''}"
+	class="{current === 'bar' ? 'selected' : ''}"
 	on:click="{() => current = 'bar'}"
 >bar</button>
 
 <button
-	class="{current === 'baz' ? 'active' : ''}"
+	class="{current === 'baz' ? 'selected' : ''}"
 	on:click="{() => current = 'baz'}"
 >baz</button>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/app-b/App.svelte b/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
index 4da386991d..a8861ad537 100644
--- a/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
+++ b/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
@@ -7,23 +7,23 @@
 		display: block;
 	}
 
-	.active {
+	.selected {
 		background-color: #ff3e00;
 		color: white;
 	}
 </style>
 
 <button
-	class:active="{current === 'foo'}"
+	class:selected="{current === 'foo'}"
 	on:click="{() => current = 'foo'}"
 >foo</button>
 
 <button
-	class:active="{current === 'bar'}"
+	class:selected="{current === 'bar'}"
 	on:click="{() => current = 'bar'}"
 >bar</button>
 
 <button
-	class:active="{current === 'baz'}"
+	class:selected="{current === 'baz'}"
 	on:click="{() => current = 'baz'}"
 >baz</button>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/text.md b/site/content/tutorial/13-classes/01-classes/text.md
index 7ad3045399..6e5b3b3c0d 100644
--- a/site/content/tutorial/13-classes/01-classes/text.md
+++ b/site/content/tutorial/13-classes/01-classes/text.md
@@ -6,7 +6,7 @@ Like any other attribute, you can specify classes with a JavaScript attribute, s
 
 ```html
 <button
-	class="{current === 'foo' ? 'active' : ''}"
+	class="{current === 'foo' ? 'selected' : ''}"
 	on:click="{() => current = 'foo'}"
 >foo</button>
 ```
@@ -15,9 +15,9 @@ This is such a common pattern in UI development that Svelte includes a special d
 
 ```html
 <button
-	class:active="{current === 'foo'}"
+	class:selected="{current === 'foo'}"
 	on:click="{() => current = 'foo'}"
 >foo</button>
 ```
 
-The `active` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
\ No newline at end of file
+The `selected` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.