first-child / first-of-type

작업을 하다가 first-child를 쓰려던 부분이 적용되지 않아 first-of-type를 적용해주니 바로 적용되었다. 차이가 궁금해 정리!

div > p:first-child
'div 하위의 p 요소 중 첫번째 요소' 로 읽는 게 아니라
'div 하위의 첫번째 자식인 요소가 p 요소' 이면이다.

div > p:first-of-type
마찬가지로 'div 하위의 p 요소 중(OF) 첫번째 요소' 라고 읽으면 바로 이해가 될 것이다.

<div>
	<input type="text" name="phone" id="Phone" readonly>
    <a href="javascript:;" class="btn">인증번호 발송</a>
    <a href="javascript:;"class="btn">재전송</a>
</div>

이 때 a 태그는 div 태그의 first-child 가 아니다.
그러므로 div 하위의 a 요소 중 첫 번째 요소 라고 적용되는 first-of-type 을 사용해야 적용이 된다. first-of-type 은 자주 사용하지 않았었는데 이렇게 정리하고 보니 차이를 좀 알겠다!
뭐든 써봐야 아는거야~~~