Skip to content

Commit 57af89e

Browse files
committed
tweak :global(...) docs
1 parent db1679c commit 57af89e

File tree

1 file changed

+7
-10
lines changed

1 file changed

+7
-10
lines changed

documentation/docs/02-template-syntax/05-styles-and-classes.md

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ This works by adding a class to affected elements, which is based on a hash of t
2727

2828
## :global(...)
2929

30-
To apply styles to a selector globally, use the `:global(...)` modifier.
30+
To apply styles to a single selector globally, use the `:global(...)` modifier.
3131

3232
```svelte
3333
<style>
@@ -37,19 +37,16 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
3737
}
3838
3939
div :global(strong) {
40-
/* applies to all <strong> elements, in any
41-
component, that are inside <div> elements belonging
40+
/* applies to all <strong> elements, in any component,
41+
that are inside <div> elements belonging
4242
to this component */
4343
color: goldenrod;
4444
}
4545
46-
p:global(.red) {
47-
/* applies to all <p> elements belonging to this
48-
component with a class of red, even if class="red" does
49-
not initially appear in the markup, and is instead
50-
added at runtime. This is useful when the class
51-
of the element is dynamically applied, for instance
52-
when updating the element's classList property directly. */
46+
p:global(.big.red) {
47+
/* applies to all <p> elements belonging to this component
48+
with `class="big red"`, even if it is applied
49+
programmatically (for example by a library) */
5350
}
5451
</style>
5552
```

0 commit comments

Comments
 (0)