diff --git a/snippets/css-not-selector-shortcut.md b/snippets/css-not-selector-shortcut.md
deleted file mode 100644
index 883edab2a..000000000
--- a/snippets/css-not-selector-shortcut.md
+++ /dev/null
@@ -1,95 +0,0 @@
-### CSS :not selector shortcut
-
-The `:not` psuedo selector is perfect for styling a group of elements, and leaving the last (or specified) element unstyled without all the lines of code.
-
-#### HTML
-
-```html
-<ul class="css-not-selector-shortcut">
-  <li class="link"><a href="">Link 1</a></li>
-  <li class="link"><a href="">Link 2</a></li>
-  <li class="link"><a href="">Link 3</a></li>
-  <li class="link"><a href="">Link 4</a></li>
-  <li class="link"><a href="">Link 5</a></li>
-</ul>
-```
-
-#### CSS
-
-```css
-li {
-  display: inline-block;
-  
-  list-style-type: none;
-  margin: 0;
-  padding: .25em 1em;
-}
-
-.css-not-selector-shortcut a {
-  text-decoration:none;
-  color: #111111;
-}
-
-.css-not-selector-shortcut li:not(:last-child) {
-  border-right: 1px solid #666666;
-}
-```
-
-#### Demo
-
-<div class="snippet-demo">
-  <ul class="snippet-demo__css-not-selector-shortcut">
-    <li><a href="">Link 1</a></li>
-    <li><a href="">Link 2</a></li>
-    <li><a href="">Link 3</a></li>
-    <li><a href="">Link 4</a></li>
-    <li><a href="">Link 5</a></li>
-  </ul>
-</div>
-
-<style>
-li {
-  display: inline-block;
-  
-  list-style-type: none;
-  margin: 0;
-  padding: .25em 1em;
-}
-
-.css-not-selector-shortcut a {
-  text-decoration:none;
-  color: #111111;
-}
-
-.css-not-selector-shortcut li:not(:last-child) {
-  border-right: 1px solid #666666;
-}
-</style>
-
-#### Explanation
-
-1. Instead of putting on the border and then taking it off:
-```css
-.css-not-selector-shortcut li {
-  border-right: 1px solid #666666;
-}
-
-.css-not-selector-shortcut li:last-child {
-  border-right: none;
-}
-```
-
-2. Use the `:not` psuedo selector to save a few lines:
-```css
-.css-not-selector-shortcut li:not(:last-child) {
-  border-right: 1px solid #666666;
-}
-```
-
-#### Browser support
-
-<span class="snippet__support-note">✅ No caveats.</span>
-
-* https://caniuse.com/#feat=css-sel3
-
-<!-- tags: visual -->
diff --git a/snippets/not-selector.md b/snippets/not-selector.md
new file mode 100644
index 000000000..067df1b49
--- /dev/null
+++ b/snippets/not-selector.md
@@ -0,0 +1,75 @@
+### :not selector
+
+The `:not` psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.
+
+#### HTML
+
+```html
+<ul class="css-not-selector-shortcut">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+```
+
+#### CSS
+
+```css
+.css-not-selector-shortcut {
+  display: flex;
+}
+
+li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0.75rem;
+}
+
+li:not(:last-child) {
+  border-right: 2px solid #d2d5e4;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <ul class="snippet-demo__css-not-selector-shortcut">
+    <li>One</li>
+    <li>Two</li>
+    <li>Three</li>
+    <li>Four</li>
+    <li>Five</li>
+  </ul>
+</div>
+
+<style>
+.snippet-demo__css-not-selector-shortcut {
+  display: flex;
+  padding: 0;
+}
+
+.snippet-demo__css-not-selector-shortcut li {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0.75rem;
+}
+
+.snippet-demo__css-not-selector-shortcut li:not(:last-child) {
+  border-right: 2px solid #d2d5e4
+}
+</style>
+
+#### Explanation
+
+`li:not(:last-child)` specifies that the styles should apply to all `li` elements except
+the `:last-child`.
+
+#### Browser support
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+* https://caniuse.com/#feat=css-sel3
+
+<!-- tags: visual -->