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> 요소를 선택 */
728x90
'CSS' 카테고리의 다른 글
[CSS] 미디어 쿼리란? (0) | 2023.08.06 |
---|---|
[CSS] 반응형 웹 vs 적응형 웹 (1) | 2023.08.01 |
[CSS] flex(flexbox)와 여러 속성들 한 눈에 보기 (0) | 2023.07.25 |
[CSS] CSS 정의와 작성 방식 (0) | 2023.07.21 |