Как выбрать дочерние элементы первого уровня

164

30 апреля 2021, 15:40

Как изменить стили только у li с надписью Категория 1 ур.

<ul class="main-menu">
  <li class='kategoria1'>
    Категория 1 ур.
    <ul>
      <li>
        Категория 2 ур.
        <ul>
          <li>Категория 3 ур.</li>
        </ul>
      </li>
      <li>Категория 2 ур.</li>
    </ul>
  </li>
  <li class='kategoria1'>
    Категория 1 ур.
    <ul>
      <li>Категория 2 ур.</li>
    </ul>
  </li>
  <li class='kategoria1'>Категория 1 ур.</li>
</ul>

Answer 1

Вам нужно сделать так, как написал в комментариях @OPTIMUS PRIME, т.е. использовать дочерние элементы ul > li и выдать им стиль..
Но это не всё, т.е. у вас в ul li вложены ещё элементы, то придётся их "ограничить" от изменений.

Допустим вам нужно поменять только цвет у li первого уровня:

/* Изменяем цвет у первого уровня */ 
.main-menu > li {color: red;} 
/* "Возвращаем" оригинальный цвет у остальных, что выше первого уровня */ 
.main-menu > li * {color: black;}

<ul class="main-menu"> 
  <li> 
    Категория 1 ур. 
    <ul> 
      <li> 
        Категория 2 ур. 
        <ul> 
          <li>Категория 3 ур.</li> 
        </ul> 
      </li> 
      <li>Категория 2 ур.</li> 
    </ul> 
  </li> 
  <li> 
    Категория 1 ур. 
    <ul> 
      <li>Категория 2 ур.</li> 
    </ul> 
  </li> 
  <li>Категория 1 ур.</li> 
</ul>

Answer 2

.kategoria1 { 
  background-color: red; 
}

<ul class="main-menu"> 
  <li class='kategoria1'> 
    Категория 1 ур. 
    <ul> 
      <li> 
        Категория 2 ур. 
        <ul> 
          <li>Категория 3 ур.</li> 
        </ul> 
      </li> 
      <li>Категория 2 ур.</li> 
    </ul> 
  </li> 
  <li class='kategoria1'> 
    Категория 1 ур. 
    <ul> 
      <li>Категория 2 ур.</li> 
    </ul> 
  </li> 
  <li class='kategoria1'>Категория 1 ур.</li> 
</ul>

Все. Просто даешь класс всем элементам которые нужно изменить (если что, не обязательно давать класс kategoria1 делай какой хочешь). Попробуй скопировать весь мой код и посмотри что получится.