[HTML/CSS] 4. CSS 선택자

Mar 11, 2025

Contents

1. 종류 1. 기본 선택자 2. 그룹 & 조합 선택자 (여러 요소를 한 번에 적용)2. 우선순위 1. 인라인 스타일 2. ID 선택자 3. 클래스, 속성, 가상 클래스 선택자 4. 태그 선택자 5. 전체 선택자

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;
}

Contents

HTML/CSS

[HTML/CSS] 4. CSS 선택자

최재원

Mar 11, 2025

Contents

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;
}

Contents