CSS 고급 선택자

연결 선택자

• 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

  하위 선택자 (부모 요소에 포함된 하위 요소를 모두 선택 = 자식선택자)
  ex) section p { ... }

  자식 선택자 (하위 선택자와 다르게 자식 요소에만 스타일을 적용)
  ex) section > p { ... }

• 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

  인접 형제 선택자 (형제 요소 중에서 첫번째 동생 요소만 선택하는 것)
  ex) h1 + p { color: blue; } - h1의 형제인 p요소 중 첫 번째 p에만 적용

  형제 선택자 (모든 형제 요소에 적용)
  ex) h1 ~ p { color: blue; } - h1의 형제인 모든 p 요소

속성 선택자

• 특정 속성이 있는 요소를 선택하는 [속성] 선택자

  [속성] 선택자 (속성값에 따라 원하는 요소를 선택)
  ex) a[href] { ... } - 찾으려고 하는 속성 이름

• 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자

  [속성 = 속성값] 선택자 (주어진 속성과 속성값이 일치하는 요소 지정)
  ex) a[target = _blank] { ... } - <a target = "_blank">인 요소

• 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자

  [속성 ~= 값] 선택자 (여러 속성값 중에서 해당 속성값이 포함된 요소를 선택)
  ex) [class ~= button] { ... } - class값 중에 button이 있는 요소

• 특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자

  [속성 |= 값] 선택자 (특정 속성값이 포함된 속성에 스타일 적용)
  ex) a[title |= us] { ... } - 속성값이 'us'이거나 'us-'로 시작하는 a 요소를 찾는 선택자

• 특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값] 선택자

  [속성 ^= 값] 선택자 (지정한 속성값으로 시작하는 요소를 선택)
  ex) a[title ^= eng] { ... } - 속성값이 'eng'로 시작하는 a요소를 찾는 선택자

• 특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자

  [속성 $= 값] 선택자 (지정한 속성값으로 끝나는 요소를 선택)
  ex) a[href $= xls] { ... } - 링크 속성값이 hwp로 끝나는 a 요소를 찾는 선택자

• 일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

  [속성 *= 값] 선택자 (지정한 속성값이 포함되어있는 요소를 선택)
  ex) [href *= w3] {...} - href의 속성값 중에서 'w3'가 포함된 요소를 찾는 선택자

가상 클래스와 가상 요소

• 사용자 동작에 반응하는 가상 클래스

1. 방문하지 않은 링크에 스타일을 적용하는 :link 가상 클래스 선택자
2. 방문한 링크에 스타일을 적용하는 :visited 가상 클래스 선택자
3. 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 :hover 가상 클래스 선택자
4. 웹 요소를 활성화했을 때 스타일을 적용하는 :active 가상 클래스 선택자
5. 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 :focus 가상 클래스 선택자

• 요소 상태에 따른 가상 클래스
  앵커 대상에 스타일을 적용하는 :target 가상 클래스 선택자
  요소의 사용 여부에 따라 스타일을 적용하는 :enabled와 :disabled 가상 클래스 선택자
  선택한 항목의 스타일을 적용하는 :checked 가상 클래스 선택자
  특정 요소를 제외하고 스타일을 적용하는 :not 가상 클래스 선택자

• 구조 가상 클래스 : 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스

• 가상 요소
  첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 ::first-line 요소, ::first-letter 요소
  내용 앞뒤에 콘텐츠를 추가하는 ::before 요소, ::after 요소