title: Select only the most nested list item with specific class
body: <p>I need to select only the the deepest <code>li.active</code> in the <code>ul</code> structure. In this case that would be <code>Další kategorie</code>. I cannot find css only solution. Is it even possible? Thanks.</p>
  
  <pre><code>&lt;nav class="smenu"&gt;
      &lt;ul&gt;
          &lt;li class="predsednictvo first"&gt;&lt;a href="/cs/csmg/predsednictvo/"&gt;&lt;span&gt;PŘEDSEDNICTVO&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="sub active komise"&gt;&lt;a href="/cs/csmg/komise/"&gt;&lt;span&gt;KOMISE&lt;/span&gt;&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li class="kategorie first"&gt;&lt;a href="/cs/csmg/komise/kategorie/"&gt;&lt;span&gt;Kategorie&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="active dalsi-kategorie last"&gt;&lt;a href="/cs/csmg/komise/dalsi-kategorie/"&gt;&lt;span&gt;Další kategorie&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; // I'need to select only this element (current page)
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="kontakty"&gt;&lt;a href="/cs/csmg/kontakty/"&gt;&lt;span&gt;KONTAKTY&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="reprezentace last"&gt;&lt;a href="/cs/csmg/reprezentace/"&gt;&lt;span&gt;REPREZENTACE&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>