CSS 선택자: body내 태그와 head내 style태그를 연결하거나, HTML파일과 분리된 CSS파일을 연결해 주는 연결고리.
선택자 종류
전체 선택자 구조
전체 선택자
- 태그 선택자: 문서 내 지명된 모든 태그에 적용.
태그 선택자 구조
태그 선택자
- id 선택자: 문서 내 유일한 요소에 적용될 수 있는 id 값에 따라 적용.
id 선택자 구조
id 선택자
- class 선택자: 문서 내 여러 요소에 동일하게 적용될 수 있는 클래스(class) 값(value)에 따라 적용.
class 선택자 구조
class 선택자
- 속성 선택자: 태그의 속성과 그 값에 따라 적용.
속성 선택자 구조
속성 선택자
- 자손 선택자: 내부(하위)의 모든 요소들을 선택해서 적용.
자손 선택자 구조
자손 선택자
- 자식 선택자: 바로 안 단계(자식)의 요소들을 선택해서 적용.
자식 선택자 구조
자식 선택자
- 가까운 형제 선택자: 동등한 위치에 있는 태그(형제) 중에 매칭되는 첫 번째 형제 하나만 선택해서 적용.
가까운 형제 선택자 구조
가까운 형제 선택자
- 형제 선택자: 형제들 중에 매칭되는 모든 형제들을 선택해서 적용.
형제 선택자 구조
형제 선택자
- 가상(pseudo) 선택자: 요소가 아닌 선택자
가상 선택자 구조
출처: https://hye-math.tistory.com/entry/가상pseudo-선택자?category=898391 [오늘 하루도 행복하게]
우선순위
- inline 스타일 > id 선택자 > class 선택자 > 태그 선택자
- 구체적일수록 높은 순위
- 같은 우선순위라면 다음(더 아랫줄)에 오는 것이 높은 순위
