css - What does :global (colon global) do? - Stack Overflow https://stackoverflow.com/questions/43613619/what-does-global-colon-g...

What does :global (colon global) do?

Asked 4 years, 9 months ago Active 3 years, 3 months ago Viewed 42k times

In some SCSS files, I see the following:

77 :global {
/* ... */
}

10 I don't know if it is an SCSS feature or a CSS feature. I tried searching about it but couldn't
find any good results at first sight.

css css-modules

Share Follow edited Apr 25 '17 at 14:40 asked Apr 25 '17 at 14:32
user247702 wellbeck190
22.6k 14 107 148 891 1 6 5

5 Looks like they are using CSS-modules: github.com/css-modules/css-modules – Troyer Apr 25 '17
at 14:34

1 @Pete to be fair, it's not exactly easy to search for. Google won't search for :global , you need
to play with keywords a bit to end up on the CSS Modules page. – user247702 Apr 25 '17 at 14:36

1 It's really hard search about that, there are few results and nothing explanation. I was found this:
medium.com/seek-developers/the-end-of-global-css-90d2a4a06284 . Interesting and very future
proof. – Marcos Pérez Gude Apr 25 '17 at 14:37

The 2 downvotes are unmeritory – Marcos Pérez Gude Apr 25 '17 at 14:37

You must have found this somewhere. If it's a file, it should have a file extension that tells you
whether it's SASS or LESS. If it's an article on the internet, I presume it'll have a title or
appropriate tags. You haven't shared that with us so we have less information than you.
– Álvaro González Apr 25 '17 at 14:37
Your privacy
By clicking “Accept all cookies”, you agree Stack
Exchange can store cookies on your device and disclose
2 Answers
information in accordance with our Cookie Policy.
Active Oldest Votes

Accept all cookies

Customize settings

1 of 3 1/26/22, 4:15 PM
css - What does :global (colon global) do? - Stack Overflow https://stackoverflow.com/questions/43613619/what-does-global-colon-g...

This operator is used in CSS Modules. Modular CSS uses a CSS Modules compiler to scope
CSS styles within their respective modules (e.g., React component).
57
Here's an example from a React module (in the file ErrorMessaging.less for the
ErrorMessaging.jsx React component):

:global(.ocssContainer) {
.ui_column {
padding-left: 0;
}
}

This gets compiled into:

.ErrorMessaging__alertContainer--1I-Cz .ocssContainer
.ErrorMessaging__ui_column--3uMUS {
padding-left: 0;
}

But now I add a :global modifier onto .ui_column :

:global(.ocssContainer) {
:global(.ui_column) {
padding-left: 0;
}
}

And this is what it compiles to:

.ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ui_column {

padding-left: 0;
}

Now .ui_column can apply to any child element with that style, including in a child React
component, and not just .ui_column elements that are part of the ErrorMessaging React
component.
Your privacy
By clicking “Accept all cookies”, you agree Stack
Exchange can store cookies on your device and disclose
Share Follow edited Oct 19 '18 at 17:43 answered Oct 19 '18 at 15:11
information in accordance with our Cookie Policy.
JohnK
5,951 6 45 71
Accept all cookies

Customize settings

2 of 3 1/26/22, 4:15 PM
css - What does :global (colon global) do? - Stack Overflow https://stackoverflow.com/questions/43613619/what-does-global-colon-g...

It looks like they are using CSS Modules. If you follow the docs they say:

18 :global switches to global scope for the current selector resp. identifier.
:global(.xxx) resp. @keyframes :global(xxx) declares the stuff in parenthesis in the
global scope.

Share Follow answered Apr 25 '17 at 15:24

Troyer
6,239 2 30 58

2 I don't get what the above paragraph means I read the paragraph in 2 parts This is the first part:
:global switches to global scope for the current selector resp. identifier. :global(.xxx) resp. And
this is the second part: @keyframes :global(xxx) declares the stuff in parenthesis in the global
scope. Is this understanding correct? – gaurav5430 Mar 24 '20 at 9:43

3 @gaurav5430 Easy way to understand it is that whatever is :global( here ) won't be mangled
by the CSS modules compiler. So :global(.foobar) in something.modules.css will be output
in final CSS as .foobar , while .foobar will be converted into a more or less random string
(depending on how the CSS modules compiler is configured), like ._1mHzwvK6Zff6h4llp7BPKK .
– Svish Jan 19 '21 at 11:19

@Svish should put your comment as an answer, i read the two answers, but they do not mention
the key word mangled – vanduc1102 Oct 5 '21 at 6:14

Your privacy
By clicking “Accept all cookies”, you agree Stack
Exchange can store cookies on your device and disclose
information in accordance with our Cookie Policy.

Accept all cookies

Customize settings

3 of 3 1/26/22, 4:15 PM