[CSS] 선택자 (전체, 자식)

전체 선택자 (Universal Selector)
* 라는 선택자는 모든 요소를 선택하는 선택자입니다.

모든 요소를 선택하기

* {
  box-sizing: border-box;
}
.gallery의 모든 자식 요소 선택하기

.gallery > * {
  width: 120px;
  height: 90px;
}
n번째 자식 선택자(n-th child Selector)
:nth-child()를 사용합니다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있는데요. 혹시 다른 프로그래밍 언어를 쓰신 경험이 있다면 0부터 시작할 거라고 생각하실 수도 있지만, 여기서는 1부터 시작합니다. (첫 번째 자식은 1이고, 세 번째 자식은 3임)

.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 { ... }