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

140
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, как только эти...

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

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

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

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

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

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

144