Как спрятать последний ul внутри ul

94
04 сентября 2019, 18:10

Есть список категорий, вложенность которого может достигать до 10 категорий
Возможно ли с помощью css скрыть последний ul внутри первого ul

.test:last-child ul { 
  display: none; 
}
<ul class="test"> 
  <li> 
    <a href="/" class="nav-link">1 категория</a> 
    <div class="pluse">+</div> 
    <ul> 
      <li> 
        <a href="/" class="nav-link">Подкатегория</a> 
        <div class="pluse">+</div> 
        <ul> 
          <li> 
            <a href="/" class="nav-link">Под категория под категории</a> 
            <div class="pluse">+</div> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

Пробовал для главного ul задавать класс test и через псевдокласс :last-child скрывать, но скрывается все меню.
Он скрывает вторую вложенность, возможно ли найти последний ul элемент внутри 'ul.test'?

Answer 1

Укажите последнему тегу li класс "hide" CSS

.hide{
  display:none;  
}

укажите класс class="hide"

<ul>
  <li>
    <a href="/" class="nav-link">1 категория</a>
    <div class="pluse">+</div>
    <ul>
      <li>
        <a href="/" class="nav-link">Подкатегория</a>
        <div class="pluse">+</div>
        <ul>
          <li class="hide">
            <a href="/" class="nav-link">Под категория под категории</a>
            <div class="pluse">+</div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Если вы указываете корневому ul некий класс, то необходимо через javascript искать последний li для скрытия.

Answer 2

Возможно не совсем то что Вы имели в виду.. Но всё же..

ul:last-child ul { 
  display: none; 
}
<ul class="test"> 
  <li> 
    <a href="/" class="nav-link">1 категория</a> 
    <div class="pluse">+</div> 
    <ul> 
      <li> 
        <a href="/" class="nav-link">Подкатегория</a> 
        <div class="pluse">+</div> 
        <ul> 
          <li> 
            <a href="/" class="nav-link">Под категория под категории</a> 
            <div class="pluse">+</div> 
            <ul> 
              <li> 
                <a href="/" class="nav-link">Под категория под категории</a> 
                <div class="pluse">+</div> 
              </li> 
            </ul> 
          </li> 
        </ul> 
      </li> 
    </ul> 
  </li> 
</ul>

READ ALSO
Не отображается CSS код

Не отображается CSS код

попытался сверстать header для макета и столкнулся с проблемой, что в моем css коде, а именно вbtn не хочет работать padding и border-radius, как только эти...

128
Как сделать клик по кнопке если разрешение экрана меньше 1600px

Как сделать клик по кнопке если разрешение экрана меньше 1600px

Как сделать клик по кнопке, если разрешение экрана по ширине меньше 1600px?

136
Изменение основного контента

Изменение основного контента

Есть сайт с 6-ю кнопками в менюСмысл в том, что каждая кнопка меняет основной контент сайта (пытаюсь сделать что-то типо сайта без обновления)

105