title: CSS selector for nested elements
body: <p>I want to stagger the fade-in animations of images in a gallery. I've boiled down my problem to the attached snippet.
  Not sure whether the snippets here allow for SCSS but in any case, I think my mistake is in the CSS selector where I set the animation-delay.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes FadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  .masonry {
    display: flex;
  }
  
  .item {
    animation: FadeIn 0.5s linear;
  }
  
  @for $i from 1 through 20 {
    .item &gt; .cld-image &gt; img:nth-child(#{$i}) {
      animation-delay: 1000ms * $i;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="masonry"&gt;
    &lt;div class="item"&gt;
      &lt;div class="cld-image"&gt;
        &lt;img src="https://picsum.photos/200" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="cld-image"&gt;
        &lt;img src="https://picsum.photos/200" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;div class="cld-image"&gt;
        &lt;img src="https://picsum.photos/200" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>