Как правильно выбрать вторую кнопку, используя nth-child, когда между первой и второй кнопкой есть другой элемент?

Question

Я пытался использовать

.myDivName button:nth-child(2) {
  background-color: red;
}

, чтобы выбрать вторую кнопку в <div class="myDivName">, но она не работает.У меня есть код -

<div class="myDivName">
  <button>
    1
  </button>
  <input type="text">
  <button>
    2
  </button>
</div>

, но я обнаружил, что если я удалю <input> между ними, то nth-child будет работать.

Как правильно выбрать эту кнопку, используяп-й ребенок (2)?Если nth-child не может быть использован, как лучше?

Спасибо!

скрипка - https://jsfiddle.net/e6au4hot/9/

Answer 1

Используйте nth-of-type вместо:

.hi > button:nth-of-type(2) {
  background-color: red;
}

jsFiddle пример

Вы обеспокоены тип элемента, а не позиция в иерархии