How to select only top-level li in recursive menu?


Tags: jquery,html,css,dom

Problem :

How do I select only first-level li's? If I do 'ul li', it also selects the children. Is there a way to select only the top level and not the children using CSS? If not, I am ok with using jQuery, but how would I select it in that case too?

<ul>
    <li class="administration first">
        <a href="/administration.aspx"><span>Administration</span></a>
        <ul>
            <li class="users first selected"><a href="/administration/users.aspx"><span>Users</span></a></li>
            <li class="forms last"><a href="/administration/forms.aspx"><span>Forms</span></a></li>
        </ul>
        <div style="clear: both;"></div>
    </li>
    <li class="analytics"><a href="/analytics.aspx"><span>Analytics</span></a></li>
    <li class="options"><a href="/options.aspx"><span>Options</span></a></li>
    <li class="system last"><a href="/system.aspx"><span>System</span></a></li>
</ul>


Solution :

You would need the element or class which is above the first ul, then specify {parent-selector} > ul > li.


    CSS Howto..

    How to display grid line on top of highchart

    How to get a small div bar to slide down a menu on mouseover

    How to display Highcharts in rows (5)

    How to put gradient on top of background image but below text

    How to create such layout in CSS?

    Bootstrap - how to clear css from element to start over?

    How do you stop a single-page site from automatically scrolling when resizing the browser?

    How do I add a CSS3 transition to an image overlay?

    How to add ellipsis to table cells with dynamic width with only CSS?

    How to set CSS rule for a DIV in a LI of class UL?

    How to create cube with only HTML and CSS?

    How to control element position when changing window size for parallax purpose

    Font not showing properly in HTML page

    How to identify element using link name in a onclick html tag?

    How to re-use .less and generated CSS across projects?

    How to change active color of bootstrap button group to have different color for each button

    How to declare css “global” height? Inside the html file or inside the css file?

    Bootstrap, css How to change background

    How to switch css property according to some condition

    How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

    How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

    How to use CSS absolute position inside a scrollable div element

    How to change width to fill the remaining space (CSS)

    How to add new line in a Bootstrap button using CSS

    css: how to format contact entry screen

    How to identify device to make separate css for iPad and Galaxy Tab?

    How can I vertical align my
  • to the top of this box which uses `display: flex`?
  • Django. how to apply css style on boolean form field?

    How to get page-header and nav-pills to appear on the same line

    How to write css rule that run with a special browser?