1 2 3 4 5 | <div> <div>text1</div> <p>text2</p> <p>text3</p> </div> | cs |
text2의 글자색상을 바꾸려고 할 때
1 2 3 4 5 | /* Case1 */ div p:first-child { color: #ff0000; } /* Case2 */ div p:first-of-type { color: #ff0000; } | cs |
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번째만 선택
