css select only first level

Asked

Viewed 864 times

2

I have a menu with up to 3 levels of nested lists. I need to select only the first level text and skip the nested content. I tried to use .menu > ul> li {} (and some variations of this) and did not result in what needed.

I tried to use .menu li:first-child > ul and resulted in the opposite of what I need, ie brought everything but the first level. I tried to use the pseudo-seletor :not in the above condition but could not.

So I need help with this selector. How to do?

<div class="menu">
<ul>
  <li>Item nível 1
     <ul>
        <li>Item nível 2
            <ul>
                <li>Item nível 3</li>
                <li>Item nível 3</li>
                <li>Item nível 3</li>
             </ul>
        </li>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
     </ul>
  </li>
  <li>Item nível 1
     <ul>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
     </ul>
  </li>
</ul>
</div>
html css css-selectors
  • 1

    Can you put your code so far in CODEPEN or JSFIDDLE? It will be easier to understand what you would like to do. ( I’m confused ).

  • The first example should have worked, unless your HTML is not in the structure I’m thinking of. It would be better if you put an example, just as the friend above said.

  • @Thiagoyoith put the html to make clear how the structure is. In reality the ultimate goal is to take the texts that in the example are "Item level 1" and ignore the rest, using jquery. But the bottleneck is on this dial that I’m not hitting. Thank you.

  • @Guilhermed, post your code exactly, here or in Jsfiddle, Codepen... Please.

  • @Gumball the code is this of the topic, no more. They are nested lists. How to select only the text of the 1st level. In the example, how to select "Item level 1" texts. Grateful.

  • Why not just put a specific class for these guys?

Show 1 more comment

3 answers

1

If I understand what you want:

ul li ul {
  display: none;
}

ul li ul li > ul{
  display: none;
}

ul li:hover > ul{
  display: block;
}

ul li:hover > ul > li:hover > ul{
  display: block;
}
<div class="menu">
<ul>
  <li>Item nível 1
     <ul>
        <li>Item nível 2
            <ul>
                <li>Item nível 3</li>
                <li>Item nível 3</li>
                <li>Item nível 3</li>
             </ul>
        </li>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
     </ul>
  </li>
  <li>Item nível 1
     <ul>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
     </ul>
  </li>
</ul>
</div>

  • thanks for the reply!

1

After searching hard, the best alternative I could find was this:

$('.menu > ul > li').clone().children().remove().end()

See the example in my Jsfiddle

I hope I’ve helped.

  • Show! That’s exactly what it was!

  • Glad you helped, Braz! When you can, give an upvote there in reply. Thanks!

1

The styles in CSS propagate to the elements contained in an element where the style has been defined. That is, styles for a first-level element of a list will be applied also to elements of the next levels. A solution can be to "undo" the style application. In CSS 3 there is the property initial that can help.

.menu li {
    color: red;
}

.menu li li {
    color: initial;
}
<div class="menu">
<ul>
  <li>Item nível 1
     <ul>
        <li>Item nível 2
            <ul>
                <li>Item nível 3</li>
                <li>Item nível 3</li>
                <li>Item nível 3</li>
             </ul>
        </li>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
     </ul>
  </li>
  <li>Item nível 1
     <ul>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
        <li>Item nível 2</li>
     </ul>
  </li>
</ul>
</div>

  • Simple and objective. :)

Browser other questions tagged html css css-selectors

You are not signed in. Login or sign up in order to post.