CSS 선택자(SELECTOR) #4

📝 CSS 개요 및 선택자(SELECTOR)
#230213

✔️ 일반 구조 선택자

형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자
(중요) 위치를 기준으로 구분함

[선택자 형태]
:first-child : 형제 관계의 요소 중 첫번째 요소

:last-child : 형제 관계의 요소 중 마지막 요소

:nth-child (수열)
형제 관계 요소 중 지정된 수열 번 째 요소를 모두 선택 (nth = n번째)
순서를 따질 때 1부터 시작함.

:nth-last-child(수열)
형제 관계 요소 중 뒤에서 부터 지정된 수열 번째 요소를 모두 선택

✔️ 형태 구조 선택자

선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자.
(선택된 요소들을 기준으로 구분)

[선택자 형태]
:first-of-type : 같이 선택된 형제들 중에서 첫번째 요소
:last-of-type : 같이 선택된 형제들 중에서 마지막 요소
:nth-of-type(수열) : 같이 선택된 형제들 중에서 수열 번째 모든 요소
:nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열 번째 모든 요소

✔️ 부정 선택자( 선택자1:not(선택자2) )

괄호 내 선택자를 제외한 나머지 요소를 선택

#test3의 자식 li요소 중 3의 배수를 제외한 요소만 선택

#test3 > li:not(:nth-of-type(3n)) {
    background-color: pink;}