Псевдокласс :nth-of-type работает почти так же, как и :nth-child. Разница заключается в том, что он учитывает тег элемента.

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

Еще пример. Если в текущем задании мы используем такие селекторы:

ul:nth-child(2) { }
ul:nth-of-type(2) { }

То верхний селектор выберет второй по счёту дочерний элемент и этот элемент должен быть ul. В нашем случае выберется первая строка карт.

А нижний селектор выберет второй по счету ul среди дочерних ul. В нашем случае выберется вторая строка карт.

Псевдокласс :nth-of-type также работает с ключевыми словами odd и even. Значение odd позволяет выбрать все нечётные элементы, а значение even — все чётные элементы указанного типа. Подробнее о работе с этими ключевыми словами рассказано в пошаговой демонстрации Использование псевдокласса :nth-child