Не работает nth-child

Question

Вот код:

@media (min-width:200px) {
  .calc_main>.switch_calc>.menu>li {
    width: 49.7%;
    border-left: 0;
  }
  .calc-main>.switch_calc>.menu>li:nth-child(2n) {
    border-left: 1px solid #EEEEEE;
  }
}

<div class="calc_main">
  <div class="switch_calc">
    <ul class="menu">
      <li id="lb_start" class="active"><a href="#" onclick="LB_start()">Прокачка лиг и дивизионов</a></li>
      <li id="rw_start"><a href="#" onclick="RW_start()">Покупка побед</a></li>
      <li id="p_start"><a href="#" onclick="P_start()">Квалификации</a></li>
      <li id="cm_start"><a href="#" onclick="CM_start()">Мастерство Чемпионов</a></li>
    </ul>
  </div>

Но nth-child ни в какую не работает, помогите, пожалуйста)

Answer 1

Чтобы всё работало, нужно не ошибаться в названии классов (calc_main, а не calc-main в Вашем случае). В целом, у Вас всё работает как надо.

Единственный момент, классы принято писать через тире, а не через нижнее подчеркивание.

@media (min-width:200px) {
  .calc_main>.switch_calc>.menu>li {
    width: 49.7%;
    border-left: 0;
  }
  .calc_main>.switch_calc>.menu>li:nth-child(2n) {
    border-left: 1px solid #f00;
  }
}

<div class="calc_main">
  <div class="switch_calc">
    <ul class="menu">
      <li id="lb_start" class="active"><a href="#" onclick="LB_start()">Прокачка лиг и дивизионов</a></li>
      <li id="rw_start"><a href="#" onclick="RW_start()">Покупка побед</a></li>
      <li id="p_start"><a href="#" onclick="P_start()">Квалификации</a></li>
      <li id="cm_start"><a href="#" onclick="CM_start()">Мастерство Чемпионов</a></li>
    </ul>
  </div>

БЛОГ НА HUSL

Не работает nth-child

Ответы (1 шт):