title: How to find last/first not empty child using only CSS?
body: <p>Let's say I have this:</p>
  <pre><code>&lt;div&gt;
     &lt;span&gt;1&lt;/span&gt;
     &lt;span&gt;2&lt;/span&gt;
     &lt;span&gt;3&lt;/span&gt;
     &lt;span&gt;&lt;/span&gt;
    &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and want to add comma to each non-empty element, besides the last non-empty one (Not last child). So from &quot;1 2 3&quot; I want to have &quot;1, 2, 3&quot;.</p>
  <p>Excluding last child is easy
  <a href="https://jsfiddle.net/1qo1swwx/" rel="nofollow noreferrer">Fiddle</a>
  But this last non-empty.</p>