diff --git a/index.html b/index.html
index b26ab9acb..09d5696eb 100644
--- a/index.html
+++ b/index.html
@@ -139,8 +139,12 @@
             <p>Changes the styling of text selection.</p>
             <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;p class="custom-text-selection"&gt;Select some of this text.&lt;/p&gt;
 </code></pre>
-            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.custom-text-selection::selection {
-  background: red;
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">::selection {
+  background: aquamarine;
+  color: black;
+}
+.custom-text-selection::selection {
+  background: deeppink;
   color: white;
 }
 </code></pre>
@@ -150,16 +154,16 @@
             </div>
             <style>
               .snippet-demo__custom-text-selection::selection {
-                background: red;
+                background: deeppink;
                 color: white;
               }
               .snippet-demo__custom-text-selection::-moz-selection {
-                background: red;
+                background: deeppink;
                 color: white;
               }
             </style>
             <h4 data-type="Explanation">Explanation</h4>
-            <p><code>::selection</code> defines a pseudo selector on an element to style text within it when selected.</p>
+            <p><code>::selection</code> defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.</p>
             <h4 data-type="Browser support">Browser support</h4>
             <div>
               <div class="snippet__browser-support">
diff --git a/snippets/custom-text-selection.md b/snippets/custom-text-selection.md
index c3cc6f1fb..ff5136934 100644
--- a/snippets/custom-text-selection.md
+++ b/snippets/custom-text-selection.md
@@ -11,8 +11,12 @@ Changes the styling of text selection.
 #### CSS
 
 ```css
+::selection {
+  background: aquamarine;
+  color: black;
+}
 .custom-text-selection::selection {
-  background: red;
+  background: deeppink;
   color: white;
 }
 ```
@@ -25,18 +29,18 @@ Changes the styling of text selection.
 
 <style>
 .snippet-demo__custom-text-selection::selection {
-  background: red;
+  background: deeppink;
   color: white;
 }
 .snippet-demo__custom-text-selection::-moz-selection {
-  background: red;
+  background: deeppink;
   color: white;
 }
 </style>
 
 #### Explanation
 
-`::selection` defines a pseudo selector on an element to style text within it when selected.
+`::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.
 
 #### Browser support