diff --git a/documentation/docs/02-template-syntax/05-styles-and-classes.md b/documentation/docs/02-template-syntax/05-styles-and-classes.md
index c2c3b7e799..7747cc7133 100644
--- a/documentation/docs/02-template-syntax/05-styles-and-classes.md
+++ b/documentation/docs/02-template-syntax/05-styles-and-classes.md
@@ -32,24 +32,24 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
 ```svelte
 <style>
 	:global(body) {
-		/* this will apply to <body> */
+		/* applies to <body> */
 		margin: 0;
 	}
 
 	div :global(strong) {
-		/* this will apply to all <strong> elements, in any
-			 component, that are inside <div> elements belonging
-			 to this component */
+		/* applies to all <strong> elements, in any
+		   component, that are inside <div> elements belonging
+		   to this component */
 		color: goldenrod;
 	}
 
 	p:global(.red) {
-		/* this will apply to all <p> elements belonging to this
-			 component with a class of red, even if class="red" does
-			 not initially appear in the markup, and is instead
-			 added at runtime. This is useful when the class
-			 of the element is dynamically applied, for instance
-			 when updating the element's classList property directly. */
+		/* applies to all <p> elements belonging to this
+		   component with a class of red, even if class="red" does
+		   not initially appear in the markup, and is instead
+		   added at runtime. This is useful when the class
+		   of the element is dynamically applied, for instance
+		   when updating the element's classList property directly. */
 	}
 </style>
 ```
@@ -73,28 +73,22 @@ To apply all styles after a certain point to a selector globally, use the `:glob
 ```svelte
 <style>
 	:global {
-		div {
-			/* this will apply to every <div> in your application */
-			margin: 0;
-		}
-		p {
-			/* this will apply to every <p> in your application */
-			color: blue;
-		}
+		/* applies to every <div> in your application */
+		div { ... }
+
+		/* applies to every <p> in your application */
+		p { ... }
 	}
 
-	div :global strong {
-		/* this will apply to all <strong> elements, in any
-			component, that are inside <div> elements belonging
-			to this component */
-		color: goldenrod;
+	.a :global {
+		/* applies to every `.b .c .d` element, in any component,
+		   that is inside an `.a` element in this component */
+		.b .c .d {...}
 	}
 </style>
 ```
 
-The difference between `:global` and `:global(...)` is that `:global(...)` only makes all styles within its braces global, whereas `:global` makes all styles coming after it global, including those in nested CSS.
-
-If `:global` is preceeded by a descendant combinator, the combinator is removed from the output. That means that `div :global.x` is equivalent to `div.svelte-hash.x`.
+> The second example above could also be turned into a `.a :global .b .c .d` selector, where everything after the `:global` is unscoped. Both forms are semantically equal, and as such this form is also supported, but the nested form is recommended instead when writing styles.
 
 ## Nested style tags
 
