> 선택자
어떤 요소에 스타일을 적용할 것인지에 대한 정보
> 선택자의 종류
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
> 특성 선택자_ 1) 컨셉
- 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택함.
- 속성 선택자라고 칭하기도 함.
ex.
> 클래스 속성을 가지고 있는 요소 선택
> 클래스 속성이 "box"인 요소 선택
> 특성 선택자_ 2) 값 확인
- 기호를 추가하여 요소를 선택하는 방식의 다양화가 가능함.
ex.
> 클래스 값에 "abs"가 포함되는 요소 선택
> 클래스 값이 "abs"로 시작하는 요소 선택
> 클래스 값이 "abs"로 끝나는 요소 선택
> 특성 선택자 예시
> 결합 선택자_ 1) 컨셉
- 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택함.
- 자손 결합자 / 형제 결합자
> 결합 선택자_ 2) 자손 결합자
- 두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있음.
ex.
> div 요소 안에 위치하는 모든 p 요소 선택
> div 요소의 바로 아래에 위치하는 모든 p 요소 선택
> 결합 선택자_ 3) 형제 결합자
- 두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있음.
ex.
> h1 요소의 뒤에 오는 형제 중 모든 p 요소 선택
> h1 요소의 바로 뒤에 오는 형제 p 요소 선택
> 결합 선택자 예시
'CSS' 카테고리의 다른 글
| [CSS] 의사 요소_ first-line, first-letter, marker, placeholder, after, before (0) | 2023.11.06 |
|---|---|
| [CSS] 의사 클래스_ hover, active, focus, disabled, nth-child() (0) | 2023.11.06 |
| [CSS] flexbox 만들기 (0) | 2023.11.05 |
| [CSS] position 속성에 대해서 (0) | 2023.11.02 |
| [CSS] background 속성에 대해서 (0) | 2023.11.02 |