Web(Front) - CSS 선택자 (Selector)

📒 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 작성하면 같은 요소에 보다 우선적으로 스타일 적용