CSS 선택자란?
CSS 선택자(Selector)는 스타일을 적용할 HTML 요소를 "선택"하는 패턴입니다. 선택자를 얼마나 정확하게 사용하느냐에 따라 CSS 코드의 품질이 결정됩니다.
기본 선택자
타입 선택자 — HTML 태그 이름으로 선택합니다. p, h1, div 등 태그명을 그대로 사용합니다. 전체 문서에 영향을 주기 때문에 리셋 CSS나 기본 스타일에 주로 사용합니다.
클래스 선택자 (.) — 가장 많이 사용하는 선택자입니다. 점(.)으로 시작하며, 같은 클래스명을 가진 모든 요소에 스타일이 적용됩니다.
ID 선택자 (#) — 샵(#)으로 시작하며, 페이지 내에서 유일한 요소를 선택합니다. 명시도가 높아 CSS 관리가 어려워질 수 있으므로, 가능하면 클래스 선택자를 사용하는 것이 좋습니다.
**전체 선택자 (*)** — 모든 요소를 선택합니다. 리셋 CSS에서 자주 사용됩니다.
결합 선택자
하위 선택자 (공백) — .parent .child 형태로 부모 안에 있는 모든 자손 요소를 선택합니다.
자식 선택자 (>) — .parent > .child 형태로 직계 자식만 선택합니다.
인접 형제 선택자 (+) — h2 + p 형태로 바로 다음에 오는 요소만 선택합니다.
일반 형제 선택자 (~) — h2 ~ p 형태로 뒤에 오는 모든 형제 요소를 선택합니다.
가상 클래스 (Pseudo-classes)
가상 클래스는 요소의 특정 상태를 선택합니다. 콜론(:) 하나로 시작합니다.
- :hover — 마우스를 올렸을 때. 버튼, 링크, 카드 등에 인터랙션 효과를 줄 때 필수입니다.
- :focus — 키보드 포커스를 받았을 때. 접근성을 위해 반드시 스타일을 지정해야 합니다.
- :first-child / :last-child — 첫 번째/마지막 자식 요소를 선택합니다.
- :nth-child(n) — n번째 자식을 선택합니다. nth-child(odd)로 홀수 행, nth-child(even)으로 짝수 행을 선택할 수 있어 테이블 줄무늬 패턴에 유용합니다.
- :not() — 특정 선택자를 제외합니다.
가상 요소 (Pseudo-elements)
가상 요소는 콜론 두 개(::)로 시작하며, HTML에 없는 가상의 요소를 만듭니다.
- ::before / ::after — 요소의 앞/뒤에 가상 콘텐츠를 삽입합니다.
- ::placeholder — input의 placeholder 텍스트 스타일을 지정합니다.
- ::selection — 사용자가 텍스트를 드래그했을 때의 스타일을 지정합니다.
속성 선택자
HTML 속성을 기준으로 요소를 선택합니다. [type="text"]로 type이 text인 input을 선택하거나, [href^="https"]로 href가 https로 시작하는 링크를 선택할 수 있습니다.
명시도 (Specificity) 이해하기
CSS에서 여러 선택자가 같은 요소를 가리킬 때, 어떤 스타일이 우선하는지 결정하는 규칙입니다. inline style(1000) > ID(100) > class(10) > 태그(1) 순서로 우선순위가 결정됩니다. !important 사용을 최소화하고, ID 선택자 대신 클래스를 사용하며, BEM 같은 네이밍 컨벤션을 따르는 것이 좋습니다.
실전 팁
- 클래스 위주로 작성하세요
- 선택자 깊이는 3단계 이하로 유지하세요
- BEM 방법론(.block__element--modifier)을 활용하세요
- :is()와 :where() 같은 모던 CSS 선택자를 활용하세요
CSS 선택자를 잘 이해했다면 Compit의 챌린지에서 직접 실습해보세요!