📒 CSS3 선택자 (Selector)
1️⃣ 선택자
- CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자(selector)존재
- 일반 선택자 : 전체, 타입, 클래스 ID 선택자로 분류
- 복합 선택자 : 자식, 하위, 인접 형제, 일반 형제 선택자로 분류
- 그 외 : 가상 클래스, 가상 엘리먼트. 속성 선택자 존재
2️⃣ 일반 선택자
- 전체 선택자
- 사용법 : *{}
- HTML 문서 내 모든 요소 선택
- 잘 사용되지 않으면 우선 순위 낮음
- 타입 선택자
- 사용법 : elementName {}
- 태그명 이용해 스타일 적용할 태그 선택
- 1개 이상의 HTML 요소 사용
- 여러 요소 콤마로 구분
- 클래스 선택자
- 사용법 : .class-name {}
- 클래스 명 : 공백 없이 대소문자 or -, _로 시작
- 동일한 클래스 명을 중복해서 사용 가능(공통 속성 적용)
- class 속성 값에 하나 이상의 클래스 적용 가능
- ID 선택자
- 사용버 : #id-name {}
- 동일한 ID 중복 사용 X (class와 달리 유일해야 함)
- id 속성 값엔 1개의 id만 사용 가능
- 일반 선택자 중 우선 순위 가장 높음
- 일반 선택자 우선 순위
- 전체 < 타입 < 클래스 < ID 선택자
3️⃣ 복합 선택자
- 하위 선택자
- 사용법 : element element {}
- 1단계 하위 요소(child)와 2단계 하위요소(descendant)에 모두 적용
- 자식 선택자
- 사용법 : element > element {}
- 1단계 하위요소(child)에만 적용
- 인접 형제 선택자
- 사용법 : element + elemetn {}
- 형제 관계 요소 여러 개 존재 시 첫 번째 요소만 선택
- 일반 형제 선택자
- 사용법 : element ~ elemetn {}
- 형제 관계 요소 여러 개 존재 시 모든 요소를 선택
4️⃣ 가상 클래스 선택자
- User Agent가 제공하는 가상 클래스 지정
- 사용법 : element:가상 클래스 {}
- 가상 클래스 선택자
- :link VS :visited
- link : 방문하지 않은 링크 선택
- visited : 방문한 링크 선택
- :hover VS :active
- hover : 요소에 마우스 올라간 경우 선택
- active : 요소가 활성화된 경우 선택
- :focus
- 요소가 포커스를 가질 경우
- :nth-child(n)
- 지정된 요소의 부모 n번째 자식들에 적용
- 괄호에 상수 뿐만 아니라 수열(2n + 1)도 가능
- n은 0부터 시작 / 자식 순번은 1부터 시작
- 첫 번째 요소와 마지막 요소 스타일 지정은 :first-child와 :last-child 선택자 사용
5️⃣ 가상 엘리먼트 선택자
- 보이지 않는 가상의 요소 선택
- 사용법 : ::가상 엘리먼트 {}
6️⃣ 속성 선택자 → 굳이 다 알 필요 X
- 특정 속성을 가지거나 속성 값을 갖는 요소 선택
- 화면에 같은 분류의 많은 항목들을 일괄적으로 선택할 때 유용
- CSS 속성 선택자
7️⃣ CSS 규칙 적용 우선순위
- 같은 엘리먼트에 두 개 이상의 CSS 규칙 적용된 경우
- 마지막 규칙, 구체적인 규칙, Iimportant가 우선 적용
- CSS 규칙 중 하단에 작성한 규칙이 마지막 규칙
- P {} 보단 p b {}가 더 구체적 → p{}가 아닌 pb {}가 적용됨
- 속성 값 뒤에 Iimportant 작성하면 같은 요소에 보다 우선적으로 스타일 적용
🖥️ Daily Dev Log ٩(๑❛ᴗ❛๑)۶