2

Tenho um menu com até 3 níveis de listas aninhadas. Preciso selecionar apenas o texto do primeiro nível e ignorar o conteúdo aninhado. Tentei usar .menu > ul> li {} (e algumas variações disto) e não resultou no que precisava.

Tentei usar .menu li:first-child > ul e resultou no oposto do que eu preciso, ou seja, trouxe tudo menos o primeiro nível. Tentei usar o pseudo-seletor :not na condição acima, mas não consegui.

Então preciso de ajuda com este seletor. Como fazer?

<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>
6
  • 1
    Consegue por o seu código feito até agora no CODEPEN ou JSFIDDLE? Ficará mais fácil de enteder o que você gostaria de fazer. ( Eu estou confuso ).
    – concas
    5/10/2016 às 17:31
  • O primeiro exemplo devia ter funcionado, a não ser que seu HTML não esteja na estrutura que estou pensando. Seria melhor se você colocasse um exemplo, assim como o amigo acima disse. 5/10/2016 às 17:37
  • @ThiagoYoith coloquei o html para deixar claro como está a estrutura. Na realidade o objetivo final é pegar os textos que no exemplo são "Item nível 1" e ignorar o restante, usando jquery. Mas o gargalo está nesse seletor que não estou acertando. Obrigado.
    – GuilhermeD
    5/10/2016 às 17:41
  • @GuilhermeD, poste exatamente seu código, aqui ou no JsFiddle, CodePen... Por favor. 5/10/2016 às 18:09
  • @Gumball o código é este do tópico, não tem mais. São listas aninhadas. Como selecionar apenas o texto do 1º nível. No exemplo, como selecionar os textos "Item nível 1". Grato.
    – GuilhermeD
    5/10/2016 às 18:18

3 Respostas 3

1

Se eu entendi o que você deseja:

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>  

1
  • obrigado pela resposta!
    – GuilhermeD
    5/10/2016 às 19:06
1

Depois de procurar bastante, a melhor alternativa que encontrei foi essa:

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

Veja o exemplo no meu JSFiddle

Espero ter ajudado.

2
  • Show! Era exatamente isto!
    – GuilhermeD
    5/10/2016 às 19:01
  • Que bom que ajudou, abraz! Quando puder, da um upvote aí na resposta. Valeu! 5/10/2016 às 19:15
1

Os estilos no CSS propagam para os elementos contidos em um elemento onde o estilo foi definido. Isto é, os estilos para um elemento do primeiro nível de uma lista serão aplicados também nos elementos dos próximos níveis. Uma solução pode ser "desfazer" a aplicação do estilo. No CSS 3 existe a propriedade initial que pode ajudar.

.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>

1
  • Simples e objetivo. :)
    – David
    5/10/2016 às 20:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .