<CSS>순서를 이용한 선택자 : nth / first or last-child

CSS

nth / first or last -child : 순서를 이용하여 선택하는 선택자. 

클래스or태그명:nth-child(number) {}

클래스or태그명:first-child {}

클래스or태그명:last-child {}

* 선택자에서 띄어쓰기( )는 자식태그를 의미하므로 띄어쓰기를 사용할 때 유의해야 한다. 

-  HTML 태그 

 

1) 일반적인 선택자

* .number p {} 가 명시성이 높으므로 우선순위가 더 높다 (우선순위는 바로 다음 게시물에 나온다)

2) nth-child의 사용

(p중 세번째와 첫번째 태그 색 바꾸기)

* number부터 접근하는 것도 가능 ( 띄어쓰기 이용) - 우선순위가 이전의 것 보다 높다

3) first-chlid / last-child

* 무조건 8이 last라고 할 순 없다. 뒤에 9번쩨 p태그가 생긴다면 last는 9번째 p태그가 된다.

 

- last-chile와 nth-child()와 우선순위 같음. 

4) 두번째 div태그 plum색 입히기

- div 태그중 두번째 태그를 선택하려고 만든 선택자 

: 적용되지 않는다. 

nth태그는 ~태그 중 ~번째를 의미하는 것이 아니라 형제들 중에 ~번째를 의미한다.

* .number :nth-child(6) {color : plum}과 이전의 태그가 같은 효과. 하지만 명시성이 떨어지기 때문에 우선순위는 낮다

5) 홀수번째와 짝수번째 선택자 : nth-child(odd or even)

* 항상 순서와 태그의 갯수가 바뀔 수 있기 때문에 nth-child 선택자는 되도록이면 사용하지 않는 것이 좋다

* last-child 와 first-child는 자주 쓰인다