title: Using CSS selectors first of type and not first child together
body: <p>I'm trying to do some styling using purely CSS selectors, my markup looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;StyledRow&quot;&gt;
     &lt;div class=&quot;Row&quot;&gt;Input 1&lt;/div&gt;
     &lt;div class=&quot;Row&quot;&gt;Input 2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;StyledRow&quot;&gt;
     &lt;div class=&quot;Row&quot;&gt;Input 1&lt;/div&gt;
     &lt;div class=&quot;Row&quot;&gt;Input 2&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;StyledRow&quot;&gt;
     &lt;div class=&quot;Row&quot;&gt;Input 1&lt;/div&gt;
     &lt;div class=&quot;Row&quot;&gt;Input 2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The rendered elements are inputs side by side (2) and then stacked on top of one another (so the user can add as many data sets as they wish)</p>
  <p>The above is a simplified version but because of additional elements, I need to be a bit more specific with my styles. For example, the current style of <code>StyledRow</code> looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>const StyledRow = styled.div`
    display: flex;
    align-items: center;
  
    *:not(:first-child) &gt; * {
      margin-left: 0.2rem;
    }
  `;
  </code></pre>
  <p>I am trying to target the second <code>Row</code> in the first <code>StyledRow</code> so that the styles can be different from the rest which use a margin-left: 0.2rem. I had tried to use first-of-type and not-first-child together but with no joy.</p>
  <p>Any suggestions would be really appreciated!</p>