Почему не работает псевдоселектор first-child?

#html #css

Есть базовая HTML структура с двумя параграфами в Body.
Почему, когда я пробовал обратиться к первому параграфу через псевдо селектор p:first-child,
ничего не вышло, но сработало p:nth-child(2). Ведь это первый параграф в родителе Body,
почему так?





 
  
 
	
 
  
Paragraph-1
  
Paragraph-2
 	
	




    

Ответы

Ответ 1

обернул твой код в 
 и все заработало




 
  
 
	
 
  

    
Paragraph-1
  
Paragraph-2
    
 	
	



Ответ 2

Это не работает в конкретном сниппете, потому что если посмотреть сгенерированную
разметку можно увидеть, что тег 



  
Paragraph-1
  
Paragraph-2







Чтобы поправить, вместо этого можно использовать first-of-type, либо обернуть нужные
элементы в какой-нибудь контейнер как в соседнем ответе.

Либо, как уже указали в комментарии, не вставлять теги html, head, body в разметку,
так как они все равно генерируются автоматически, а повторные просто убираются. И использовать
для скриптов, разметки и css специальные поля в сниппетах.



console.log(document.body.innerHTML);
p:first-child {
  color: red;
}
Paragraph-1
Paragraph-2