Target all nested li of chosen parent li
<p>I have three unordered lists nested in each other. Second and third <code>ul</code> is hided (<code>display: none;</code>)</p>

<p>By first event i need to show all <code>ul.second</code> elements of first <code>li</code> of <code>ul.first</code>.</p>

<p>By second event i need to show all <code>ul.third</code> elements of first <code>li</code> of <code>ul.second</code>.
Here is the code:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;ul class="first"&gt;
&lt;li class="first-element"&gt;
    &lt;ul class="second"&gt;
        &lt;li class="second-element"&gt;
            &lt;ul class="third"&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="second-element"&gt;
            &lt;ul class="third"&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="second-element"&gt;
            &lt;ul class="third"&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;li class="first-element"&gt;
    &lt;ul class="second"&gt;
        &lt;li class="second-element"&gt;
            &lt;ul class="third"&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="second-element"&gt;
            &lt;ul class="third"&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="second-element"&gt;
            &lt;ul class="third"&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
                &lt;li class="third-element"&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>ul.second li {
    display: none;
}
ul.third li {
    display: none;
}
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$('li.first-element:eq(0) li.second-element').show(); // works fine, it shows only li.second-element of ul.first first li
$('li.second-element:eq(0) li.third-element').show(); // does not work, in log it gives me empty []
</code></pre>

<p>How to target <code>li.second-element:eq(0) li.third-element</code> in other way ?</p>
