[CSS] CSS의 다양한 선택자

 

1. 단일 선택자

 

단일 선택자란 선택자가 가리키는 요소 혹은 개체가 하나임을 말한다.

다만, 단일 선택자라고  해도 적용받는 태그의 수는 여러 개일 수 있다.

 

 

1.1 전체 선택자 ( Universal Selector )

• 모든 형태의 모든 요소를 선택

 

* {
  color: red;
  background-color: blue;
}
 
/* 페이지의 모든 요소에 대해 스타일 적용 */

 

 

1.2 태그 선택자 ( Type Selector )

• 작성한 태그의 모든 요소를 선택

 

p {
  color: red;
  text-align: center;
}
 
/* 페이지의 모든 <p> 요소에 대해 스타일 적용 */

 

 

1.3 Class 선택자 ( Class Selector )

• 작성한 클래스 값을 가지는 모든 요소를 선택

 

.name {
  color: red;
  text-align: center;
}
 
/* name이라는 클래스를 가지고 있는 요소에 대해 스타일 적용 */

 

 

1.4 ID 선택자 ( ID Selector )

• 작성한 ID 의 값을 가지는 모든 요소를 선택
• ID 값은 중복되면 안 되기 때문에 반드시 하나의 ID 값만 가져야 한다.

 

#naming {
  text-align: center;
  color: red;
}
 
/* id="naming"인 모든 HTML 요소 선택하여 스타일 적용 */

 

 

 

2. 복합 선택자

 

특정 요소를 호출하고 싶으나, 기본 선택자만으로는 선택이 불가능한 경우 사용하는 선택자

 

 

 

2.1 자손 선택자 ( Descndant Selector )

• 선택자는 공백 ( ) 으로 구분
• 해당 요소의 하위 요소들 중 지정한 요소를 모두 선택

 

div p {
  background-color: green;
}
 
/* <div> 요소 안의 모든 <p> 요소를 선택 */

 

 

2.2 자식 선택자 ( Child Selector )

• 선택자는 부등호 ( > ) 로 구분
• 해당 요소의 바로 밑에 존재하는 하위 요소들 중 특정 타입의 요소를 모두 선택

 

div > p {
  background-color: green;
}
 
/* <div> 요소 안 자식 요소 중 모든 <p> 요소를 선택 */

 

 

2.3 인접 형제 선택자 ( Adjacent Sibling Selector )

• 선택자는 플러스 ( + ) 로 구분
• A + B : A 뒤에 있는 B 하나
• 두 요소가 동위 관계에 있으며, 해당 요소 바로 뒤에 존재하는 요소를 선택

 

div + p {
  background-color: green;
}
 
/* 모든 <div> 요소와 동위 관계에 있는 요소 중 바로 뒤에 존재하는 <p> 요소를 선택 */

 

 

2.4 일반 형제 선택자 ( General Sibling Selector )

• 선택자는 물결 ( ~ ) 로 구분
• A ~ B  : A 뒤에 있는 B 모두
• 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 모든 특정 타입의 요소를 모두 선택

 

div ~ p {
  background-color: green;
}
 
/* 모든 <div> 요소와 동위 관계에 있는 요소 중 <div> 요소보다 뒤에 존재하는 모든 <p> 요소를 선택 */