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

#javascript #html #css #css3 #nth_of_type

не могу понять в чем разница между nth-child и nth-of-type в css?

Например я использую:

.container .elem:nth-child(1) {
  property: value
}


Но это не всегда срабатывает для первого или n-ного элемента.

В чем может быть проблема?
    

Ответы

Ответ 1

Введение

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).

Думаю довольно понятно объяснение, если есть вопросы могу дополнить ответ.