130

In some SCSS files, I see the following:

:global {
  /* ... */
}

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.

user247702
  • 23,641
  • 15
  • 110
  • 157
wellbeck190
  • 1,421
  • 2
  • 8
  • 5
  • 6
    Looks like they are using CSS-modules: https://github.com/css-modules/css-modules – Troyer Apr 25 '17 at 14:34
  • 2
    @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
  • 3
    It's really hard search about that, there are few results and nothing explanation. I was found this: https://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
  • @Pete I saw that too, and initially skipped them because I (wrongly) assumed they weren't what I was looking for. – user247702 Apr 25 '17 at 14:42
  • @Pete depending on your region and search engine. Look at this screenshot: https://s1.postimg.org/pgtn62srj/Captura_de_pantalla_2017-04-25_a_las_16.55.34.png . Except the link I've attached on the previous comment, the rest of results are not related with `:global`. – Marcos Pérez Gude Apr 25 '17 at 14:56
  • 1
    I know google can't search ":global" string, I tryied with symbolhound.com, but I can't find answer for me. Thanks @Troyer, now I know it's is a feature of css preprocessor (css-module). It isn't a css selector similar :root. Do I understand right? – wellbeck190 Apr 25 '17 at 15:18
  • @wellbeck190 If my answer was the correct one please mark it as correct answer, thank you :) – Troyer May 02 '17 at 10:19
  • Thanks for spelling out "colon" in your question title, I was looking for the colon rather than "global" per se and it allowed me to find your question. Something I'll try to do in my own Q&As. – frandroid Mar 02 '23 at 16:16

3 Answers3

100

The :global 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).

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.

JohnK
  • 6,865
  • 8
  • 49
  • 75
24

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

: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.

Troyer
  • 6,765
  • 3
  • 34
  • 62
  • 3
    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 09:43
  • 7
    @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 05 '21 at 06:14
4

The :global selector keyword is used in css modules to specify that a class should not be scoped to the component in which it is defined. This selector allows the class to be used globally in the application, rather than just within a specific component. For example, let say you have a .is-global-class class defined in a CSS Module file, you can use :global(.is-global-class) to apply that class to an element and make it available globally.

Oluwagbemi Kadri
  • 400
  • 5
  • 15