복합 선택자

선택자는 HTML 요소를 찾는 역할을 합니다. 복합 선택자는 여러 기본 선택자를 조합하여 보다 정확하고 효율적으로 대상 요소를 선택할 수 있게 해줍니다.

자손 선택자 (후손 선택자)

특정 요소의 모든 자손(후손) 요소를 선택합니다. 문법: 부모선택자 자식선택자 {CSS속성} (공백으로 구분). 예를 들어 div 안에 있는 모든 span이 선택됩니다(중첩된 span 포함).

<style>
  div span {
    color: red;
  }
</style>

<span>span 태그 (선택 안 됨)</span>
<div>
  <span>div 안의 span (빨간색)</span>
  <p>
    <span>div > p > span (빨간색)</span>
  </p>
</div>

자식 선택자

특정 요소의 바로 아래 자식 요소만 선택합니다. 문법: 부모선택자 > 자식선택자 {CSS속성} (>로 구분).

<style>
  div > span {
    color: red;
  }
</style>

<div>
  <span>직계 자식 span (빨간색)</span>
  <p>
    <span>p 안의 span (선택 안 됨)</span>
  </p>
</div>

그룹 선택자 (병렬 선택자)

여러 요소에 동일한 스타일을 한 번에 적용합니다. 문법: 선택자1, 선택자2, ..., 선택자N {CSS속성} (쉼표로 구분). 가독성을 위해 한 줄에 하나씩 쓰는 것이 좋습니다.

<style>
  div,
  p,
  span {
    color: red;
  }
</style>

<div>div 태그</div>
<p>p 태그</p>
<span>span 태그</span>

교집합 선택자 (병용 선택자)

여러 조건을 모두 만족하는 요소를 선택합니다. 문법: 선택자1선택자2 {CSS속성} (연속해서 붙여씀, 태그 선택자는 맨 앞에 와야 함).

<style>
  p.box {
    color: red;
  }
</style>

<p class="box">p 태그 + box 클래스 (빨간색)</p>
<p>p 태그 (선택 안 됨)</p>
<div class="box">div + box 클래스 (선택 안 됨)</div>

가상 클래스 선택자 (Pseudo-class)

요소의 특정 상태를 나타내는 선택자입니다. 예: 마우스 오버, 방문 여부 등.

hover (마우스 오버)

문법: 선택자:hover { CSS속성 } (콜론 앞뒤 공백 없음).

<style>
  a:hover {
    color: orange;
  }
  .box:hover {
    color: green;
  }
</style>

<a href="#">a 태그 (오렌지로 변경)</a>
<div class="box">div 태그 (초록색으로 변경)</div>

링크 관련 가상 클래스 (참고)

하이퍼링크는 네 가지 상태를 가집니다: :link (방문 전), :visited (방문 후), :hover (마우스 오버), :active (클릭 순간). 작성 순서는 LVHA 순서를 지켜야 합니다. 실제 업무에서는 보통 a { ... }로 기본 스타일을 지정하고 a:hover { ... }로 hover 상태만 추가로 지정합니다.

구조적 가상 클래스 (일부)

• :root – 문서 루트 요소 선택
• :not(선택자) – 해당 선택자를 제외한 요소
• :only-child – 부모 내 유일한 자식
• :first-child – 첫 번째 자식
• :last-child – 마지막 자식
• :nth-child(n) – n번째 자식 (n은 숫자, odd, even, 수식 가능)
• :nth-last-child(n) – 뒤에서 n번째
• :nth-of-type(n) – 같은 태그 중 n번째
• :empty – 자식이 없는 요소
• :target – URL 프래그먼트가 가리키는 요소