CSS Selector 총정리

Table of Contents

1. CSS Selector란?

CSS 선택자(Selector)는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 선택자는 어떤 HTML 요소에 스타일을 적용할지 지정하는 핵심 도구입니다.

2. CSS Selector의 분류 및 역할

2-1 기본 선택자 (Basic Selectors)

선택자	설명	예시	역할
`*`	전체 선택자	`* { margin: 0; }`	모든 요소에 적용
`태그명`	태그 선택자	`p { color: red; }`	특정 태그에 스타일 적용
`.클래스명`	클래스 선택자	`.highlight { font-weight: bold; }`	동일 클래스를 가진 여러 요소에 적용
`#아이디명`	아이디 선택자	`#header { background: blue; }`	특정 요소 하나에 고유하게 적용

2-2 그룹 선택자 (Group Selectors)

선택자	설명	예시	역할
`A, B`	여러 선택자에 동일 스타일 적용	`h1, h2, p { margin: 0; }`	반복 스타일 코드를 줄여줌

2-3 결합 선택자 (Combinators)

선택자	설명	예시	역할
`A B`	하위 선택자	`div p {}`	div 안의 모든 p 요소 선택
`A > B`	자식 선택자	`ul > li {}`	ul 바로 아래 li만 선택
`A + B`	인접 형제 선택자	`h1 + p {}`	h1 바로 다음에 오는 p
`A ~ B`	일반 형제 선택자	`h1 ~ p {}`	h1 이후에 나오는 모든 p

2-4 속성 선택자 (Attribute Selectors)

선택자	설명	예시	역할
`[attr]`	속성 존재 여부	`[disabled]`	disabled 속성이 있는 요소
`[attr="value"]`	정확히 일치	`[type="text"]`	type이 text인 요소
`[attr^="value"]`	시작 문자열	`[href^="https"]`	https로 시작하는 링크
`[attr$="value"]`	끝 문자열	`[src$=".jpg"]`	jpg로 끝나는 이미지
`[attr*="value"]`	포함 문자열	`[title*="abc"]`	abc가 포함된 title 속성

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

선택자	설명	예시	역할
`:hover`	마우스 오버 시	`a:hover {}`	링크에 마우스 올릴 때
`:active`	클릭 중일 때	`button:active {}`	버튼 클릭 순간
`:focus`	포커스 시	`input:focus {}`	입력창 선택 상태
`:first-child`	첫 번째 자식	`li:first-child`	첫 번째 li에만 스타일
`:last-child`	마지막 자식	`li:last-child`	마지막 li에만 스타일
`:nth-child(n)`	n번째 자식	`li:nth-child(2)`	두 번째 li
`:not(selector)`	제외	`p:not(.title)`	title 클래스 아닌 p

2-6 가상 요소 선택자 (Pseudo-element Selectors)

선택자	설명	예시	역할
`::before`	요소 앞에 콘텐츠 추가	`p::before { content: "→ "; }`	꾸미기용
`::after`	요소 뒤에 콘텐츠 추가	`p::after { content: ";"; }`	마무리용
`::first-line`	첫 줄 스타일	`p::first-line { font-weight: bold; }`	인용문처럼 표현
`::first-letter`	첫 글자 스타일	`p::first-letter { font-size: 200%; }`	잡지 스타일 효과

3. 실무 활용 팁

효율적인 스타일링: ID보다 Class 중심 사용 권장 (#id는 우선순위가 높아 관리 어려움)
CSS 성능 최적화: 너무 구체적인 선택자(X) → 유지 보수 어려움
정리된 구조 필요: BEM, SMACSS 같은 네이밍 규칙을 선택자에도 적용

4. 실습 예제

<!DOCTYPE html>
<html>
<head>
  <style>
    p.highlighted::before {
      content: "👉 ";
    }

    div.notice > p:first-child {
      color: red;
    }

    a[href^="https"] {
      color: green;
    }

    input:focus {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <div class="notice">
    <p>첫 문장</p>
    <p>두 번째 문장</p>
  </div>

  <p class="highlighted">중요한 문단</p>
  <a href="https://example.com">안전 링크</a>
  <input type="text" placeholder="여기에 입력">
</body>
</html>

5. 마무리 정리

구분	사용 용도
기본 선택자	가장 많이 사용, 전반적 스타일링
결합 선택자	구조적 선택 (부모-자식, 형제 관계)
속성 선택자	조건 기반 필터링
가상 클래스	상태 기반 동작 (hover, focus 등)
가상 요소	시각적 장식용 콘텐츠 추가