diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 63d5150..1892864 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -50,11 +50,11 @@
 
 <nav>
 	<ul>
-		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
-		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
+		<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
+		<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
+		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li>
 	</ul>
-</nav>
\ No newline at end of file
+</nav>