[CSS] CSS 선택자

선택자 (Selector)

• Html 문서에서 CSS 규칙이 적용 타겟이 되는 다양한 종류의 CSS 선택자(selector)가 존재
• 일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류
• 복합 선택자는 자식 선택자, 하위 선택자, 인접 형제 선택자, 일반 형제 선택자로 분류

CSS 규칙 적용 우선순위

• 같은 element에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용
• CSS 규칙들 중 하단에 작성한 규칙이 마지막 규칙
• p {} 보다 p b {}가 더 구체적인 규칙이므로 p {}가 아닌 p b{}가 적용됨
• 속성 값 뒤에 !important를 작성하면, 같은 엘리먼트에 대해 보다 우선적으로 스타일 적용

일반 선택자

일반 선택자 우선순위

• ID 선택자 > 클래스 선택자 > 타입 선택자 > 전체 선택자

전체 선택자

• 전체 선택자 (Universal Selector) 사용법 : * {}
• HTML 문서 내 모든 element를 선택
• 잘 사용되지 않으며 우선 순위가 가장 낮음

타입 선택자

• 타입 선택자 (Type Selector)의 사용법 : elementName {}
• 태그명을 이용해서 스타일을 적용할 태그를 선택
• 1개 이상의 HTML 엘리먼트를 사용 가능
• 여러 엘리먼트를 선택할 때는 컴마(,)로 구분

클래스 선택자

• 클래스 선택자 (Class Selector) 사용법 : .className {}
• 클래스 명은 공백 없이 대소문자 또는 Hypen(-), UnderScore(_)로 시작
• HTML 문서 내에서 동일한 클래스 명을 중복해서 사용 가능 (공통 속성 적용)
• class 속성 값에 하나 이상의 클래스를 적용 가능 (공백으로 구분)

ID 선택자

• ID 선택자(ID Selector) 사용법 : #idName {}
• HTML 문서에서 동일한 ID를 중복 사용할 수 없음
• id 속성 값에는 하나의 id만 사용 가능

복합 선택자

하위 선택자

• 하위 선택자(Descendant Selector) 사용법 : element element {}
• 하위 선택자는 1단계 하위 요소 (child)와 2단계 이상 하위요소 (descendant)에 모두 적용

자식 선택자

• 자식 선택자(Child Selector) 사용법 : element > element {}
• 자식 선택자는 1단계 하위 요소 (child)에만 적용

인접 형제 선택자

• 인접 형제 선택자 (Adjacent Sibling Selector) 사용법 : element + element {}
• 형제(sibling) 관계인 엘리먼트가 여러 개 존재할 경우 첫 번째 엘리먼트만 선택

일반 형제 선택자

• 일반 형제 선택자 (General Sibling Selector) 사용법 : element ~ element {}
• 형제(sibling) 관계인 엘리먼트가 여러 개 존재할 경우 모든 엘리먼트를 선택

가상 클래스 선택자

• 가상 클래스 선택자 (Pseudo-Classes Selector)는 User Aget가 제공하는 가상의 클래스를 지정
• 사용법 : :가상 클래스 {}
  • :link - 방문하지 않은 링크를 선택
  • :visited - 방문한 링크를 선택
  • :hover - 요소에 마우스가 올라간 경우 선택
  • :active - 요소가 활성화 된 경우 선택
  • :focus - 요소가 포커스를 가질 경우 선택
  • :nth-child(n) - 지정된 요소 부모의 n번째 자식들에 적용
    • 괄호에 상수 뿐만 아니라 수열(ex. 2n + 1)도 가능
  • :first-child / :last-child - 첫번째 요소 / 마지막 요소에 적용

가상 엘리먼트 선택자

• 가상 엘리먼트 선택자 (Psuedo-Element Selector)는 보이지 않는 가상의 엘리먼트를 선택
• 사용법 : ::가상 엘리먼트 {}
  • ::after - 지정된 요소 뒤에 content 추가
  • ::before - 지정된 요소 앞에 content 추가
  • ::first-letter - 지정된 요소의 첫 번째 문자 선택
  • ::first-line - 지정된 요소의 첫 번째 라인 선택
  • ::selection - 사용자에 의해 선택된 요소의 위치 선택

속성 선택자

• 특정한 속성을 가지거나 속성 값을 갖는 엘리먼트를 선택
• 화면에 같은 분류의 많은 항목들을 일괄적으로 선택할 때 유용

선택자	의미
[A]	A 속성이 포함된 엘리먼트 선택
[A=V]	A 속성 값이 V와 정확히 일치하는 엘리먼트 선택
[A-=V]	A 속성 값이 V단어를 포함하는 엘리먼트 선택
[A^=V]	A 속성 값이 V로 시작하는 엘리먼트 선택
[A*=V]	A 속성 값이 V를 포함하는 엘리먼트 선택
[A$=V]	A 속성 값이 V로 끝나는 엘리먼트 선택
[A|=V]	A 속성 값이 정확히 V이거나, V-으로 시작하는 엘리먼트 선택