Чем отличается -child от -of-type?

149

04 февраля 2021, 23:40

Пытался понять их различия, но так и не понял, зачем их использовать. Например, li:nth-child(odd) и li:nth-of-type(odd). В чём суть?

Answer 1

Предположим, что у вас такая разметка:

<section>
   <h1>Words</h1>
   <p>Little</p>
   <p>Piggy</p>    <!-- Нужен этот элемент -->
</section>

Вариант p:nth-of-type(2) { color: red; } будет выбирать второй параграф одного родителя. И сработает правильно.

Вариант p:nth-child(2) { color: red; } будет выбирать второй элемент одного родителя, и срабатывать если он является параграфом. В данном случае выберется <p>Little</p> что неправильно.