[CSS 셀렉터(선택자)의 종류]

CSS는 특정한 태그를 지정하여 스타일을 주는 언어입니다. 이를 위해서 어떤 태그에 스타일을 줄 것인지 정의하는 문법이 필요한데 이 때 사용되는 문법을 셀렉터(선택자)라고 합니다.

 

1. 전체 셀렉터 *

전체 셀렉터는 문서의 전체 요소를 선택하는 셀렉터입니다. 

* {  }

 

2. 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.

 

h1 { }

section, h1 { }

 

3. ID, Class 셀렉터

ID는 앞에 #을 붙여서 선택하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다.(ID는 중복되면 안 되기 때문!)

#아이디명 { }

 

Class 셀렉터는 .을 붙여서 선택하며 여러 객체에 적용할 수 있습니다.

.클래스명 { }

 

4. 자식 셀렉터

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다. 아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <div> 요소는 선택되지만, <p> 요소의 자식인 <div> 요소는 선택되지 않습니다.

header > div { }

5. 후손 셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손을 선택합니다. 아래 예시의 경우 <header> 요소의 자식인 <div> 요소뿐 아니라, <p> 요소의 자식인 <div> 요소까지 모두 선택됩니다.

header div {}

6. 형제 셀렉터

형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다. 아래 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소를 모두 선택합니다.

section ~ p { }

7. 인접 형제 셀렉터

인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다. 예시의 경우 <section> 요소 뒤에 있는 세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택합니다.

section + p { }