CSS Selector 총정리

by

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 등)
가상 요소시각적 장식용 콘텐츠 추가

Leave a Comment