![[HTML/CSS] 4. CSS 선택자](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T12%3A26%3A21.639Z-6496fccf-1e32-4b6a-9157-a1962617e91d&w=3840&q=75)
1. 종류
1. 기본 선택자
선택자 | 설명 | 예제 |
* | 모든 요소 선택 | * { margin: 0; } |
태그 | 특정 태그 선택 | p { color: red; } |
.클래스 | 특정 클래스 선택 | .title { font-size: 20px; } |
#아이디 | 특정 ID 선택 (고유 요소) | #header { background: blue; } |
id → #
- 같은 이름의 id 중복 사용 불가
- 유니크 값임
- 주로 js에서 요소를 찾을 때 사용 됨
#box {
background-color: red;
}<div id="box">Hello World</div>
class → .
- 주로 css 스타일링 할 때 사용 됨
.box {
background-color: blue;
}<div class="box">Hello World</div>
tag → tag
div {
background-color: green;
}<div>Hello World</div>
2. 그룹 & 조합 선택자 (여러 요소를 한 번에 적용)
선택자 | 설명 | 예제 |
A, B | 여러 요소 동시 선택 | h1, h2 { color: green; } |
A B | 자식 포함 모든 하위 요소 선택 | div p { color: red; } |
A > B | 특정 부모의 직계 자식만 선택 | div > p { font-size: 16px; } |
(,) 사용
- or 처럼 사용함. 작성한 모든 요소에 스타일 적용
h1,
div {
background-color: green;
}( ) 사용
- 첫 번째 요소의 모든 자식 요소에 스타일 적용
- div 안에 있는 모든 p에 스타일 적용
div p {
background-color: green;
}(>) 사용
- 첫 번째 요소의 바로 아래에 있는 직계 자식에게 스타일 적용
- div 바로 밑 div에서 1층 아래에 있는 p들에게 스타일 적용
div > p {
background-color: green;
}2. 우선순위
1️⃣인라인 스타일 (
style="")→가장 강력2️⃣ID 선택자 (
#id)3️⃣클래스, 속성, 가상 클래스 선택자 (
.class, [type="text"], :hover)4️⃣태그(요소) 선택자 (
div, p, h1)5️⃣전체 선택자(
*), 상속(Inheritance) → 가장 낮음1. 인라인 스타일
<div style="color:red;">Hello World</div>2. ID 선택자
#box {
background-color: red;
}3. 클래스, 속성, 가상 클래스 선택자
.box {
background-color: blue;
}4. 태그 선택자
div {
background-color: green;
}5. 전체 선택자
* {
background-color: green;
}Share article