CSS 형태 선택기

by

내가 가장 좋아하는 CSS 선택기 중 하나입니다.

친자관계나 질서를 확실히 알면 선택하기가 더 쉬울 것 같다는 생각이 들었습니다.

펜 참조 무제 by 노수빈(@subinno) 에 코드펜.

'추천 관련글,

/* #컨테이너 div:first-child{
파란색;
}

#컨테이너 div:nth-child(8){
빨간색;
} */

/* #container div:nth-child(even) {
녹색;
} */

#컨테이너 div:nth-child(2n) {
녹색;
}

/* #container div:nth-child(odd) {
빨간색;
} */

#container div:nth-child(2n+1) {
빨간색;
}

#container p:nter type(1) {
배경색: 빨간색;
색상 흰색;
}

#container p:nter type(4) {
배경색: 빨간색;
파란색;
}

#container p:n-last-of-type(3) {
배경색: 청자색;
색상: 황록색;
}

 :nth-child(n) : n번째 자식을 선택합니다.


정수, 홀수, 짝수, 시퀀스 등을 사용할 수 있습니다.

A:nth-of-type(n): A 자식 중에서 n번째 자식을 선택합니다.

#container div:첫 번째 자식
id가 container인 요소의 첫 번째 자식 요소 div를 선택한다는 의미입니다.

마지막은 마지막에 씁니다.

#container div:nth-child(짝수)
id가 container인 div 요소의 모든 짝수 자식을 선택한다는 의미입니다.

(2n)도 같은 것을 의미합니다.

#container div:nth-child(odd) / (2n+1) 홀수

p:nter 유형(1)
p:first-child 와 동일하게 보일 수 있지만, p: 첫째 아이 는 p 태그가 아니더라도 숫자에 포함되며, type을 입력하면 p가 어떤 숫자에 있든 상관없이 p의 첫 번째여야 합니다.

p:n-마지막 유형(3)
앞에서 배운 것을 적용하면 p 태그 끝에서 세 번째를 선택한다는 의미입니다.