:first-child 와 :first-of-type 의 차이점

<div>
    <div>text1</div>
    <p>text2</p>
    <p>text3</p>
</div>

text2의 글자색상을 바꾸려고 할 때

/* Case1 */ 
div p:first-child { color: #ff0000; }

/* Case2 */ 
div p:first-of-type { color: #ff0000; }

p:first-child 는 p가 가장 첫번째에 위치해야함. 따라서 색상변경불가.

P:first-of-type은 지정 타입의 첫번째이면 가능함. 글자색상 변함.

last-child / last-of-type 도 마찬가지

only-child - 유일한 자식을 선택함.

ex) li > a

only-of-type - 유일한 자식을 선택.

p:only-of-type

h2:only-of-type

nth-last-child() - 마지막에서 n번째 자식을 선택

p:nth-of-type(3) - 여러개의 자식노드가 있을때 p의 3번째만 선택