title: select an element "inside" the :first-child pseudo selector using CSS
body: <p>Good day all.</p>
  
  <p>I have a problem, a structure like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;span&gt;
      &lt;/li&gt;
      &lt;li class="selected"&gt;
          &lt;span&gt;&lt;span&gt;
      &lt;/li&gt;
      &lt;li class="selected"&gt;
          &lt;span&gt;&lt;span&gt;
      &lt;/li&gt;
      &lt;li class="selected"&gt;
          &lt;span&gt;&lt;span&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;span&gt;&lt;span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to select the first and last  that have selected on the parent... the pseudo code should be like this:</p>
  
  <pre><code>li.selected span { background: #FF4D6E; color: white; }
  li.selected:first-child span{border-radius:30px;}
  li.selected:last-child span{border-radius:30px;}
  </code></pre>
  
  <p>the problem is that the <code>span</code> is inside the collection of <code>.selected</code> so I would like to have the first <code>.selected</code>, and its <code>span</code></p>