From f5f58460cb0e60b0bcdcd91dbc34464b39d9b81f Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 22 Jul 2024 14:02:58 +0200
Subject: [PATCH] documentation

---
 .../05-styles-and-classes.md                  | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

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 48cdeabce5..4a20be5eba 100644
--- a/documentation/docs/02-template-syntax/05-styles-and-classes.md
+++ b/documentation/docs/02-template-syntax/05-styles-and-classes.md
@@ -25,7 +25,7 @@ This works by adding a class to affected elements, which is based on a hash of t
 </style>
 ```
 
-## :global
+## :global(...)
 
 To apply styles to a selector globally, use the `:global(...)` modifier.
 
@@ -66,6 +66,34 @@ The `-global-` part will be removed when compiled, and the keyframe will then be
 </style>
 ```
 
+## :global
+
+To apply all styles after a certain point to a selector globally, use the `:global` modifier.
+
+```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;
+		}
+	}
+
+	div :global strong {
+		/* this will apply to all <strong> elements, in any
+			component, that are inside <div> elements belonging
+			to this component */
+		color: goldenrod;
+	}
+</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.
+
 ## Nested style tags
 
 There should only be 1 top-level `<style>` tag per component.