Is there a way to target only the initial occurrence of an element without affecting any nested elements? I specifically want to single out the first ul element within the #menu container, without selecting any children or descendants.
For instance, using ul:first-of-type would fetch the first unordered list, but it would also grab any subsequent submenus (ul ul, ul li ul, and so on). My aim is to exclusively target the primary ul within #menu.
One workaround could be:
#menu ul:not(ul ul):not(ul ul ul):not(ul ul ul ul) {property: value;}
The path #menu > ul won't work for me since the number of elements between #menu and the desired ul can vary.
<nav id="menu">/* display: flex; justify-content: space-between; */
<div>
<ul>/* Primary, select THIS ul (no > in selector!) */
<li>Menu</li>
<li>Menu</li>
<li>Menu
<ul>/* Secondary menu. */
<li>Menu</li>
<li>Menu
<ul>/* Tertiary menu. */
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</li>
<li>Menu</li>
</ul>
</li>
<li>Menu</li>
</ul>
</div>
<div>
/* Auxiliary menu items on right side of menu bar, may contain ul (do not select these either). */
</div>
</nav>