🔍 자세한 CSS 선택자(selector) 개념 정리

CSS 선택자는 HTML 요소들을 선택하여 스타일(색깔, 크기, 위치 등)을 적용할 때 사용하는 규칙입니다.

📌 CSS 선택자 종류설명사용법 예시

1. 요소 선택자 (Element Selector)	특정 HTML 태그 이름을 가진 모든 요소를 선택합니다.	p → 모든 <p> 요소
2. 아이디 선택자 (ID Selector)	HTML 요소의 고유 ID를 선택합니다. (ID는 HTML 문서 내에서 중복 불가능)	#title → ID가 "title"인 요소
3. 클래스 선택자 (Class Selector)	특정 클래스 이름을 가진 요소들을 선택합니다. (클래스는 중복 가능)	.active → 클래스 이름이 "active"인 요소들
4. 하위 선택자 (Descendant Selector)	특정 요소 내부에 포함된 모든 하위 요소를 선택합니다.	div p → <div> 안에 있는 모든 <p> 요소
5. 자식 선택자 (Direct Child Selector)	특정 요소의 바로 아래에 있는 자식 요소만 선택합니다.	div > p → <div> 바로 아래 있는 <p> 요소만 선택
6. 인접 형제 선택자 (Adjacent Sibling Selector)	특정 요소 뒤에 바로 이어지는 형제 요소만 선택합니다.	h2 + p → <h2> 바로 다음에 오는 <p>
7. 일반 형제 선택자 (General Sibling Selector)	특정 요소 뒤에 따라오는 모든 형제 요소를 선택합니다.	h2 ~ p → <h2> 뒤에 있는 모든 <p>

📌 추가로 알아야 할 중요 개념

게임을 하시면서 혼란스러웠을 법한 갑자기 등장하는 숫자나 몇 번째 요소를 고르는 개념을 설명합니다.

이것은 가상 클래스 선택자(pseudo-class selector)라는 개념입니다.
가상 클래스란, HTML 요소의 특정 상태나 위치를 기준으로 선택하는 방법입니다.

👉 주요한 가상 클래스 선택자

가상 클래스 선택자의미사용법 예시해석

:first-child	첫 번째 자식 요소를 선택	p:first-child	부모의 자식 요소 중 첫 번째이고, 동시에 <p> 태그여야 선택
:last-child	마지막 자식 요소를 선택	div:last-child	부모의 마지막 자식 요소이고, <div>여야 선택
:nth-child(n)	n번째 자식 요소를 선택	li:nth-child(2)	부모의 자식 요소 중 정확히 두 번째인 요소이고 <li>여야 선택
:nth-child(odd)	홀수 번째 자식 요소 선택 (1,3,5…)	li:nth-child(odd)	홀수 번째 자식 <li> 요소들
:nth-child(even)	짝수 번째 자식 요소 선택 (2,4,6…)	li:nth-child(even)	짝수 번째 자식 <li> 요소들

:nth-child(n)의 괄호(()) 안에 숫자나 수식이 들어가는데요, 다음처럼 이해하면 쉽습니다.

숫자를 넣을 때:
- li:nth-child(3) → 부모 요소의 자식 중 정확히 3번째 자식이고, 이 자식이 <li>태그라면 선택됩니다.
짝수/홀수일 때:
- li:nth-child(odd) → 홀수번째(1,3,5,...) <li> 선택
- li:nth-child(even) → 짝수번째(2,4,6,...) <li> 선택
수식을 넣는 경우 (an+b 형태):
- li:nth-child(3n) → 3의 배수번째 요소(3번째, 6번째, 9번째...)
- li:nth-child(2n+1) → 홀수번째 요소(1,3,5...)
- li:nth-child(n+4) → 4번째부터 이후 모든 요소(4,5,6...)

이런 숫자 표현(nth-child)은 요소의 순서를 기준으로 스타일을 주고 싶을 때 유용하게 사용됩니다.

_____________________________________________________________________________________

1. 요소(태그) 선택자

2. 클래스 선택자

형태: .클래스이름
예시: .blue, .small
의미: 특정 클래스가 붙은 요소만 골라냅니다. 예를 들어, <div class="blue small"></div>를 선택하고 싶다면 .blue나 .small로 선택할 수 있어요.

3. 아이디(ID) 선택자

형태: #아이디이름
예시: #unique-item
의미: 문서 안에서 딱 하나만 사용되는 고유한 ID를 선택합니다. 예를 들어, <div id="unique-item"></div>를 선택할 때 사용합니다.
팁: 일반적으로 하나의 HTML 문서 안에서 같은 ID를 여러 번 쓰지 않습니다.

4. 자손 선택자 (공백)

형태: 부모요소 자식요소
예시: ul li, plate apple
의미: 앞쪽 요소 안에 들어 있는(더 깊은 단계라도 포함) 모든 뒤쪽 요소를 선택합니다. plate apple은 모든 <plate> 요소 안의 <apple> 요소를 전부 찾아요.

5. 자식 선택자 (>)

형태: 부모요소 > 자식요소
예시: ul > li, plate > apple
의미: 바로 아래 1단계 자식인 요소만 골라냅니다. plate > apple은 <plate>에 바로 감싸인 <apple>만 선택하고, 그 더 안쪽(손자, 증손자)은 제외합니다.

6. 형제 선택자

인접 형제 선택자 (+)
- 형태: 요소A + 요소B
- 예시: h2 + p
- 의미: A 요소 바로 뒤에 오는 B 요소를 선택합니다.
일반 형제 선택자 (~)
- 형태: 요소A ~ 요소B
- 예시: h2 ~ p
- 의미: A와 같은 부모를 공유하고, A 뒤에 오는 모든 B 요소를 선택합니다. (인접이 아니어도 상관없음)

7. 속성 선택자

형태: [속성이름="값"], [속성이름] 등
예시: [type="checkbox"], [required]
의미: 특정 HTML 속성을 가진 요소를 고를 수 있습니다. 예를 들어 [required]는 required라는 속성이 있는 모든 요소를 선택합니다.

8. 가상 클래스(Pseudo-classes)와 기타 선택자

예: :first-child, :last-child, :nth-child(n), :hover 등
이들은 특정한 상태나 위치에 따라 요소를 선택할 때 사용합니다. 예를 들어, :first-child는 부모 안에서 첫 번째로 위치한 자식 요소만을 선택합니다.

게임을 하면서 주의하면 좋은 점

선택자의 우선순위는 크게 중요하지 않지만, 어떤 선택자가 더 구체적으로 요소를 고르는지 감을 익혀보세요. (게임에서는 보통 선택 대상 하나만 고르는 형태지만, 실제 CSS에서는 중요한 개념입니다.)
시각적으로 바로 확인할 수 있어 재미있지만, 혹시 헷갈린다면 실제 HTML 구조를 상상해보거나, 브라우저의 개발자 도구로 요소 트리를 확인해보세요.