You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/02-template-syntax/05-styles-and-classes.md
+20-26Lines changed: 20 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -32,24 +32,24 @@ To apply styles to a selector globally, use the `:global(...)` modifier.
32
32
```svelte
33
33
<style>
34
34
:global(body) {
35
-
/* this will apply to <body> */
35
+
/* applies to <body> */
36
36
margin: 0;
37
37
}
38
38
39
39
div :global(strong) {
40
-
/* this will apply to all <strong> elements, in any
41
-
component, that are inside <div> elements belonging
42
-
to this component */
40
+
/* applies to all <strong> elements, in any
41
+
component, that are inside <div> elements belonging
42
+
to this component */
43
43
color: goldenrod;
44
44
}
45
45
46
46
p:global(.red) {
47
-
/* this will apply 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. */
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. */
53
53
}
54
54
</style>
55
55
```
@@ -73,28 +73,22 @@ To apply all styles after a certain point to a selector globally, use the `:glob
73
73
```svelte
74
74
<style>
75
75
:global {
76
-
div {
77
-
/* this will apply to every <div> in your application */
78
-
margin: 0;
79
-
}
80
-
p {
81
-
/* this will apply to every <p> in your application */
82
-
color: blue;
83
-
}
76
+
/* applies to every <div> in your application */
77
+
div { ... }
78
+
79
+
/* applies to every <p> in your application */
80
+
p { ... }
84
81
}
85
82
86
-
div :global strong {
87
-
/* this will apply to all <strong> elements, in any
88
-
component, that are inside <div> elements belonging
89
-
to this component */
90
-
color: goldenrod;
83
+
.a :global {
84
+
/* applies to every `.b .c .d` element, in any component,
85
+
that is inside an `.a` element in this component */
86
+
.b .c .d {...}
91
87
}
92
88
</style>
93
89
```
94
90
95
-
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.
96
-
97
-
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`.
91
+
> 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.
0 commit comments