[CSS] 선택자 붙여쓰기 정리 (복합 선택자 이해하기)

CSS 선택자는 전체 DOM 중에서 내가 스타일을 적용하고 싶은 요소를 정확히 지정하는 도구입니다.
그중에서도 실무에서 자주 헷갈리는 부분이 바로 선택자 붙여쓰기(복합 선택자) 입니다.

 

1. 클래스 선택자 붙여쓰기

.delay.book-info {
    속성 추가
}

의미는 명확합니다.

delay 클래스이면서 book-info 클래스를 동시에 가진 요소만 선택

• 두 클래스는 같은 요소에 있어야 함
• 클래스 순서는 상관없음
• 다른 클래스가 더 있어도 선택됨

<div class="delay book-info extra"></div>  <!-- 선택됨 -->

 

2. 태그 + 클래스 조합도 가능

p.delay.book-info {
    속성 추가
}

이것 역시 문제 없습니다.

p 태그이면서 delay + book-info 클래스를 가진 요소 선택

✔ 태그 선택자 + 클래스 선택자 조합 가능
✔ 순서 역시 중요하지 않음

3. 태그 + ID 선택자

p#shipping {
}

의미:

p 태그이면서 id가 shipping인 요소 선택

• id는 문서 내 유일
• 따라서 이 선택자는 매우 구체적임

 

4. ID + 클래스 조합

#shipping.delay.book-info {
    속성 추가
}

의미:

id가 shipping이고, class에 delay와 book-info를 모두 가진 요소 선택

• id 조건 + 클래스 조건을 동시에 만족해야 함
• 선택 범위가 매우 좁아짐

 

5. 선택자 작성 순서에 대한 권장 사항

문법적으로는 아래 모두 동일하게 동작합니다.

.delay.book-info#shipping
.book-info#shipping.delay
#shipping.delay.book-info

하지만 가독성과 관례상 아래 순서를 권장합니다.

ID → 클래스 → 태그

#shipping.delay.book-info { }

읽는 사람 기준으로 가장 중요한 조건(id) 을 먼저 보여주기 위함입니다.

 

6. 조합 선택자는 많이 쓸수록 좋을까?

아닙니다.

 

실무 권장 원칙

• 클래스 하나짜리 선택자를 기준으로 설계
• 복합 선택자는 정말 필요한 경우에만

/* 권장 */
.card { }
.card--active { }

/* 과도한 조합 (비권장) */
#main .container ul li.card.active { }

조합이 많아질수록:

• 유지보수 어려움
• 재사용성 저하
• 스타일 의존도 증가

 

 

정리하면

 

CSS 선택자는 정확하게 쓰되, 단순하게 유지하는 것이 가장 좋다.
기본은 단일 클래스, 조합은 예외적으로 사용하자.