Как выбрать второй элемент с определенным классом с помощью nth-of-type?

Question

[Alex_8x]

Есть некая верстка из трех дочерних элементов. Пример https://codepen.io/Foxmind/pen/xxGYLZE

Мне нужно выбрать второй из двух элементов с классом item. Вместо этого выбирается первый. Подскажите, пожалуйста, почему?

Answer 1

[WapSter]

Ничего не выйдет. :nth-child :nth-of-type отсчитывают все элементы общего родителя, в не зависимости от класса.

UPD :nth-of-type зависит от тега и считает только элементы с тэгом к которому был применен.

Comments

[Alex_8x]

То есть, с помощью него можно выбирать только селекторы по тегу, но не по классу?

[WapSter]

Alex_8x, и не по тегу он просто все элементы посчитает.

[Alex_8x]

WapSter, что в таком случае означает "элемент указанного типа" - https://webref.ru/css/nth-of-type?

И в чем тогда отличие nth-of-type от nth-child, если и тот и другой просто считает все элементы?

[WapSter]

Alex_8x, я немного не правильно написал. Действительно как я сказал он считает все элементы с общим родителем. Но есть зависимость от тега как ты и предположил, тобишь

<div class="wrapper">
  <a href="#">link </a>
  <div>text</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

.item:nth-of-type(2) учтет второй див проигнорировав ссылку.

[Alex_8x]

WapSter, ага понятно теперь.
Плюс думаю будет не лишним тут эту ссылку оставить https://css-tricks.com/the-difference-between-nth-... для полноты картины