title: CSS Get last-child that doesn't have a class
body: <p>Here is a tricky challenge for you guys, CSS selector to get the <code>:last-child</code> that doesn't have a class.</p>
  
  <p>What I have tried so far:</p>
  
  <pre><code>.nav-item:not(.nav-item--mobile):last-child {...}
  .nav-item:last-child:not(.nav-item--mobile) {...}
  </code></pre>
  
  <p>I have similar query selectors that do some fun stuff, so I'd rather try and do this via CSS. The mobile items can be variable in quantity.</p>
  
  <pre><code>// Get the first child in the list when there are n or more, and
  // they are not mobile. Yes, this actually works.
  .nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)
  </code></pre>
  
  <p>The following will give me the last child in all cases, but I want the last child that isn't a mobile only child.</p>
  
  <pre><code>.navigation-item--top:last-child
  </code></pre>
  
  <h3>Target</h3>
  
  <pre><code>generic generic generic generic generic mobile mobile
                                     ^
                               target this one
  </code></pre>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;ul class="nav-items-list"&gt;
      &lt;li class="nav-item"&gt;&lt;/li&gt;
      &lt;li class="nav-item"&gt;&lt;/li&gt;
      &lt;li class="nav-item"&gt;&lt;/li&gt;
      &lt;li class="nav-item"&gt;&lt;/li&gt;
      &lt;li class="nav-item nav-item--mobile"&gt;&lt;/li&gt;
      &lt;li class="nav-item nav-item--mobile"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><em>Yes I could figure out which is the correct one in the generated navigation, or I could find it with JS.</em></p>