css select only first level

Question

css select only first level

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

2

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

I tried to use .menu li:first-child > ul and it resulted in the opposite of what I need, that is, I brought everything but the first level. I tried to use pseudo-seletor :not in the above condition, but I 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-seletores

asked by anonymous 05.10.2016 / 19:28

3 answers

Change the iframe (embed bootstrap) according to the navigation bar button Thymeleaf can not find resources

score 1 · Answer 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>

score 1 · Answer 2

1

After searching a lot, the best alternative I found was this:

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

See the example in my JSFiddle

I hope I have helped.

05.10.2016 / 20:56

score 1 · Answer 3

Styles in CSS propagate to elements contained within an element where the style was defined. That is, the styles for a first-level element in a list will also be applied to the elements of the next levels. One solution may be to "undo" the application of style. In CSS 3 there is the initial property 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>