🔍 선택자란?
- HTML 요소에 스타일을 적용할 때 어떤 요소를 선택할지 지정하는 문법
✅ 기본 선택자 (Basic Selectors)
| 선택자 | 의미 | 예시 |
|---|
A | 태그 선택 | div {} |
.class | 클래스 선택 | .box {} |
#id | ID 선택 | #header {} |
A, B | 여러 요소 동시 선택 | h1, p {} |
* | 전체 요소 선택 | * { margin: 0; } |
✅ 결합자 (Combinators)
| 선택자 | 의미 | 예시 |
|---|
A B | A 내부 모든 후손 B | div p {} |
A > B | A의 직계 자식 B만 선택 | ul > li {} |
A + B | A 바로 다음 형제 요소 B | h1 + p {} |
A ~ B | A 이후 모든 형제 요소 B | h1 ~ p {} |
✅ 구조 선택자 (Structural Pseudo-classes)
| 선택자 | 의미 | 예시 |
|---|
:first-child | 첫 번째 자식 요소 | li:first-child {} |
:last-child | 마지막 자식 요소 | li:last-child {} |
:only-child | 유일한 자식 요소 | div:only-child {} |
:nth-child(n) | n번째 자식 | li:nth-child(2) {} |
:nth-last-child(n) | 뒤에서 n번째 자식 | li:nth-last-child(1) |
✅ 타입 기반 선택자 (Type Pseudo-classes)
| 선택자 | 의미 | 예시 |
|---|
:first-of-type | 형제 중 같은 태그의 첫 번째 요소 | p:first-of-type {} |
:last-of-type | 같은 타입 중 마지막 요소 | li:last-of-type {} |
:nth-of-type(n) | 같은 태그 중 n번째 요소 | li:nth-of-type(2) {} |
:nth-of-type(odd) | 같은 태그 중 홀수 번째 | tr:nth-of-type(odd) {} |
:nth-of-type(even) | 같은 태그 중 짝수 번째 | tr:nth-of-type(even) {} |
:empty | 내용(텍스트+태그)이 없는 요소 | p:empty {} |
:not(X) | X에 해당하지 않는 요소 | div:not(.active) {} |
✅ 속성 선택자 (Attribute Selectors)
| 선택자 | 의미 | 예시 |
|---|
A[attribute] | 해당 속성이 존재하는 A 요소 | input[required] {} |
A[attribute="value"] | 정확히 일치하는 속성값 | input[type="text"] {} |
A[attribute^="value"] | 해당 속성이 value로 시작 | a[href^="https"] {} |
A[attribute$="value"] | 해당 속성이 value로 끝남 | img[src$=".jpg"] {} |
A[attribute*="value"] | 해당 속성에 value 포함됨 | div[class*="item"] {} |
💡 TIPS
