CSS first-of-type

<div>
    <h1>1</h1>
    <p>2</p>
    <span>3</span>
</div>

<div>
    <h1>1</h1>
    <p>2</p>
    <span>3</span>
</div>

 

div p:first-child { font-size: 20px; }

div p:first-of-type { font-size: 20px; }

 

구조 가상 셀렉터인 first-of-type는 div안의 p기준으로

p의 부모태그인 div안에 있는 첫번째 p를 선택한다.

 

반면 first-child는 div안에 있는 p기준으로 첫번째 p만 선택한다.