В чем разница между nth-child и nth-of-type?

не могу понять в чем разница между nth-child и nth-of-type в css?
Например я использую:
.container .elem:nth-child(1) { property: value }
Но это не всегда срабатывает для первого или n-ного элемента.
В чем может быть проблема?

Ответ

Введение
p:nth-child(2) сработает для второго элемента (выборка происходит среди всех элементов, вне зависимости типа; не важно p, li или a), который является p, если второй элемент во вложенности не p то он не сработает.
p:nth-of-type(2) сработает для, именно, второго p, если вообще есть такой элемент или количество таких элементов больше или равно 2.
Пример №1
Если у тебя во вложенном блоке элементы одного типа, то разницы между двумя данными псевдоклассами вы не увидите.
nth-child
div p:nth-child(2) { background-color: #66ff66; } div p { border: 1px solid black; }

Первый параграф

Второй параграф

nth-of-type
div p:nth-of-type(2) { background-color: #66ff66; } div p { border: 1px solid black; }

Первый параграф

Второй параграф

Пример №2
Если вы добавите, допустим, заголовок в начало, то p:nth-child(2) сработает для первого параграфа (второй элемент по порядку, который соответствует типу p).
В случае с p:nth-of-type(2) выбор будет происходить только среди элементов p, а второй по счету p, это то что нам нужно.
nth-child
div p:nth-child(2) { background-color: #66ff66; } div p { border: 1px solid black; }

Первый заголовок

Первый параграф

Второй параграф

nth-of-type
div p:nth-of-type(2) { background-color: #66ff66; } div p { border: 1px solid black; }

Первый заголовок

Первый параграф

Второй параграф

Абсолютно тот же принцип работает для first-child и first-of-type, если считать, что first-child равно nth-child(1) и first-of-type равно nth-of-type(1)
Думаю довольно понятно объяснение, если есть вопросы могу дополнить ответ.