title: Specify child in a parent in svelte
body: <p>I am trying to replicate the page loading template from <a href="https://codepen.io/jonmilner/pen/qBQwQJ" rel="nofollow noreferrer">here</a></p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;loading&quot;&gt;
    &lt;div class=&quot;loading__ring&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 100 100&quot; style=&quot;enable-background:new 0 0 100 100;&quot; xml:space=&quot;preserve&quot;&gt;&lt;path&gt;...../path&gt;&lt;/svg&gt;
    &lt;/div&gt;
  &lt;div class=&quot;loading__ring&quot;&gt;
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 100 100&quot; style=&quot;enable-background:new 0 0 100 100;&quot; xml:space=&quot;preserve&quot;&gt;&lt;path&gt;......&lt;/path&gt;&lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Normal CSS style</p>
  <pre><code>/* Demo */
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#ecf0f1, #fff);
  }
  
  /* Animation */
  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }
  
  /* Variables */
  $loader-size: 100px;
  
  /* Loading Icon */
  .loading {
    width: $loader-size;
    height: $loader-size;
  
    &amp;__ring {
      position: absolute;
      width: $loader-size;
      height: $loader-size;
      
      &amp;:first-child {
        transform: skew(30deg,20deg);
      }
  
      &amp;:last-child {
        transform: skew(-30deg,-20deg) scale(-1, 1);
  
        svg {
          animation-delay: -0.5s;
        }
      }
  
      svg {
        animation: rotate 1s linear infinite;
        fill: rgba(0, 0, 0, 0.2);
      }
    }
  }
  </code></pre>
  <p>I tried to alter into the svelte style by using <a href="https://svelte.dev/repl/765f182ddd75486a8f6cf0b3ba75f276?version=3.46.4" rel="nofollow noreferrer">example</a> specifying child like <code>.loading:global(loading__ring)</code> but this is exactly where I am getting the error saying</p>
  <blockquote>
  <p>Internal server error: /Users/mypc/Documents/testingsveltenvite/v2/src/App.svelte:18:2 Identifier is expected</p>
  </blockquote>
  <p>How do I alter specifying child <code>&amp;__ring</code>or<code>.loading:global(loading__ring)</code> and <code>&amp;:first-child</code> in svelte</p>
  <pre><code>/* Loading Icon */
  .loading {
    width: var(--size);
    height: var(--size);
  
    .loading:global(loading__ring) {
      position: absolute;
      width: var(--size);
      height: var(--size);
      
      &amp;:first-child {
        transform: skew(130deg,15deg);
      }
  
      &amp;:last-child {
        transform: skew(-130deg,-1deg) scale(-1, 1);
  
        svg {
          animation-delay: -0.91s;
        }
      }
  
      svg {
        animation: rotate 4s linear infinite;
        fill: rgba(0, 0, 0, 0.2);
      }
    }
  }
  </code></pre>