title: Are there selectors that target elements in certain grid positions?
body: <p>I have a CSS grid with a bunch of auto-flowed grid items. Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I <em>do not know from the source order which items will be in certain positions in the grid</em>. This means that styling with <code>:nth-child()</code> will not be reliable. </p>
  
  <p>I would like to add styling to items in certain grid columns, (mostly the last column). Is there a CSS selector that will let me style these items?</p>
  
  <p>For example, in this demo, how would I style boxes 3, 5, and 9, (<a href="https://codepen.io/johnbeales/pen/ybZrQa" rel="noreferrer">codepen here</a>)?</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>.grid-container {
          display:grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-column-gap: 1em;
          grid-row-gap: 1em;
      }
  
      .grid-item {
          background-color: #aea;
          text-align:center;
          font-size:3em;
          min-height:3em;
          line-height: 3em;
      }
  
      .grid-item.double {
          grid-column-start: span 2;
          grid-row-start: span 2;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class="grid-container"&gt;
  
      &lt;div class="grid-item"&gt;1&lt;/div&gt;
      &lt;div class="grid-item"&gt;2&lt;/div&gt;
      &lt;div class="grid-item"&gt;3&lt;/div&gt;
      &lt;div class="grid-item"&gt;4&lt;/div&gt;
      &lt;div class="grid-item double"&gt;5&lt;/div&gt;
      &lt;div class="grid-item"&gt;6&lt;/div&gt;
      &lt;div class="grid-item"&gt;7&lt;/div&gt;
      &lt;div class="grid-item"&gt;8&lt;/div&gt;
      &lt;div class="grid-item"&gt;9&lt;/div&gt;
      &lt;div class="grid-item"&gt;10&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Edit:</strong> The code will end up in a CMS and may change in the future.</p>