CSS 핵심 개념 : 알아두면 좋은 선택자

전체 선택자(Universal Selector)

* 라는 선택자는 모든 요소를 선택하는 선택자임

 

모든 요소를 선택하기

* {
  box-sizing: border-box;
}

.gallery의 모든 자식 요소 선택하기

.gallery > * {
  width: 120px;
  height: 90px;
}

 

n번째 자식 선택자(n-th child Selector)

:nth-child() 를 사용함

괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있음 (1부터 시작)

 

.gallery의 세 번째 자식

.gallery :nth-child(3) { ... }

.gallery의 짝수 번째 자식

.gallery :nth-child(even) { ... }

.gallery :nth-child(2n) { ... }

.gallery의 홀수 번째 자식

.gallery :nth-child(odd) { ... }

.gallery :nth-child(2n+1) { ... }

특히 첫 번째 자식, 마지막 자식은 아래처럼 선택함

.gallery :first-child { ... }

.gallery :last-child { ... }