CSS: select last element at specified depth (two-level menubar) <p>I have a multi level menu: menu line + some items may have a drop list. Items in menu line are separated by '|' and obviously the last item should not have it's border</p> <p>The problem is that <code>last-child</code> here captures the very last item in the last dropdown list and I need to capture menu line item (item3).</p> <p><a href="https://i.stack.imgur.com/lzRJz.png" rel="nofollow noreferrer">result</a></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/* MENU */ div.menu { display: inline; } div.menu a { padding-left: 0.5em; padding-right: 0.5em; border-right: 1px solid lightgrey; font-size: 12pt; } div.menu a:last-child { border-right: 0px; } /*DROP DOWN*/ .dropdown { position: relative; display: inline; } .dropdown_content { display: none; z-index: 1; position: absolute; top: 1em; right: 0; background-color: #f9f9f9; white-space: nowrap; border-bottom: 1px solid lightgrey; } .dropdown_content a { padding: 0.2em; text-decoration: none; display: block; } .dropdown:hover .dropdown_content { display: block; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="menu"&gt; &lt;a href=""&gt;Item1&lt;/a&gt; &lt;a href=""&gt;Item2&lt;/a&gt; &lt;div class="dropdown"&gt; &lt;a class="dropbtn"&gt;Item3&lt;/a&gt; &lt;div class="dropdown_content"&gt; &lt;a href=""&gt;Subitem1&lt;/a&gt; &lt;a href=""&gt;Subitem2&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p>I need pure CSS solution, please no JS<br> It should work on IE11<br> I suspect that maybe the menu html structure is not ideal too ... so maybe some different structure would automatically solve the issue. </p> <p>Thank in advance ! :)</p>