CSS - 자식 요소 가상 선택자 :nth-child(), :nth-of-type()

닌니디자인 CSS 썸네일

 

자식요소 가상 선택자

부모안에 모든 요소중 특정 조건을 만족하는 요소를 선택하여 스타일을 적용할 수 있다. 다양한 방법으로 요소를 선택할 수 있다.

:first-child	자식 요소 중에서 제일 첫 번째에 위치하는 요소
:first-of-type	자식 요소 중에서 특정유형(태그)들 중 제일 첫 번째에 위치하는 요소
:last-child	자식 요소 중에서 제일 마지막에 위치하는 요소
:last-of-type	자식 요소 중에서 특정유형(태그)들 중 제일 마지막에 위치하는 요소
:nth-child(n)	자식 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들
:nth-of-type(n)	자식 요소 중에서 특정유형(태그)들을 기준으로 n번째에 위치하는 요소들
:nth-last-child(n)	자식 요소 중에서 인덱스를 기준으로 마지막부터 계산하여 n 번째에 위치하는 요소들
:nth-last-of-type(n)	자식 요소 중에서 특정유형(태그)들을 기준으로 마지막부터 계산하여 n번째에 위치하는 요소들

 

 

:first-child

자식 요소 중에서 제일 첫 번째에 위치하는 요소

li:first-child { 
	color: red; 
}

 

:first-of-type

자식 요소 중에서 특정유형(태그)들 중 제일 첫 번째에 위치하는 요소

p:first-of-type {
    color: red;
}

 

 

---

 

domain_verification Source

CSS :first-child 가상 클래스 사용 방법 - 코딩에브리바디