title: Is there a CSS nth child reset
body: <p>After much searching and reading the only way to reset an nth seems to be per my example below. Without the <code>:nth-child(1)</code> the rules will persist through all media queries.</p>
  <p>Example, which would be common, is a flexbox list with numerous rows of elements. At mobile 2 across, at tablet 3 and desktop 4. I want to set left margin for all but first element of the row which would be dynamic based on viewport.</p>
  <p>No mention of a reset in:</p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child</a></p>
  <p>Is there a better approach?</p>
  <pre><code>.example {
      width: calc((100% - 30px) /2);
      margin-top: 5px;
      padding: 12px 6px;
      &amp;:not(:nth-child(2n+1)) {
          background-color: blue;
          margin-left: 15px;
      }
      @media (min-width: 768px) {
          width: calc((100% - 30px) / 3);
          &amp;:not(:nth-child(1)) {
              background-color: transparent;
              margin-left: 0;
          }
          &amp;:not(:nth-child(3n+1)) {
              background-color: red;
              margin-left: 15px;
          }
      }
      @media (min-width: 1024px) {
          width: calc((100% - 90px) /6);
          &amp;:not(:nth-child(1)) {
              background-color: transparent;
              margin-left: 0;
          }
          &amp;:not(:nth-child(6n+1)) {
              background-color: green;
              margin-left: 15px;
          }
      }
  }
  
  </code></pre>