Как обратиться к стилям определенного элемента?

Question

[kot98]

Есть такая разметка

<div class="app">
  <div class="app__title">
   ...
  </div>

  <div class="app__block>
      <div class="item-block">
        ...
      </div>
      <hr class="item-hr">
  </div>

  <div class="app__block>
      <div class="item-block">
        ...
      </div>
      <hr class="item-hr">
  </div>

  <div class="app__block>
      <div class="item-block">
        ...
      </div>
      <hr class="item-hr">
  </div>

</div>

нужно тэгу hr именно в третьем app__block задать display:none. и именно третьему app__block задать margin-bottom.

Comments

[Ankhena]

Третий или последний?

p.s. еще можно заменить div и hr на section - будет проще стилизовать

Answer 1

[Вадим]

nth-child

.app__block:nth-child(3) {
  margin-bottom: 8px;
}

.app__block:nth-child(3) .item-hr {
  display: none
}

Comments

[kot98]

Вадим,
.app__block:nth-child(3) исходя из разметки выбирает второй app-block, а не третий

[Вадим]

kot98, Отлично, поменяйте 3 на 4.
Или посмотрите на похожие селекторы на мдн (в сайдбаре будет перечень) и выберите какой надо.