https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
nth-child means
select an element if:
1. It is a paragraph element
2. It is the second child of a parent
nth-of-type means:
Select the second paragraph child of a parent :nth-of-type
EX)
HTML
<section>
<p>Little</p>
<p>Piggy</p> <!-- Want this one -->
</section>
CSS
p:nth-child(2) { color: red; }
/* 둘 다 적용된다 */
p:nth-of-type(2) { color: red; }
그런데 만약 HTML이 이렇게 바뀌면,
<section>
<h1>Words</h1>
<p>Little</p>
<p>Piggy</p> <!-- Want this one -->
</section>
둘 중 하나는 적용이 안된다. 무엇이..?
nth-child(2)는 부모인 section 안에서 2번째를 찾아 컬러 적용 -> Little
nth-of-type(2)는 부모인 section 안에서 2번째 <p>를 찾아 컬러 적용 -> Piggy
