실제 코드로 보는 '조합 선택자' 사용 이유

다음은 실제 사이트 내 투표 기능에 관련된 일부 소스이다.

 

▼ 한 항목에 대한 투표 기능을 담당하는 UI 코드

<div id="yJ3ncmCQ1l0Bp9uGGiSA" class="col-12 col-sm-12 col-md-12 col-lg-6 
SingleChoice_at-question-entry__5HWTb at-question-entry p-0">
<div class="row vote-choice SingleChoice_at-label__8F6la w-100">

<div class=" col-2 col-sm-2 col-md-2 col-lg-2 text-center align-self-center">
<input class="checkbox-hidden" type="checkbox">
<div class="SingleChoice_main-checkmark__s1yy7">
</div></div></div></div>

이 구조에서 핵심은 input(체크박스)은 기능 담당,

div는 디자인(커스텀 체크마크) 이라는 점이다.

그렇다면 체크박스를 화면에서 숨기는

스타일은 어떻게 적용했을까?

바로 다음과 같은 방식이다.

 

▼ type=checkbox 를 숨기는 CSS 코드

.SingleChoice_at-question-entry__5HWTb input[type=checkbox] {
  display: none;
}

---

1) 조합 선택자(Combinator selector) — 정의

조합 선택자는 CSS에서 두 개 이상의 선택자를 조합해
특정 구조 안의 요소만 타깃할 때 쓰는 선택자다.

 

가장 기본적인 형태는 띄어쓰기( )를 사용하는 자손 선택자이며,

그 외에 >(직계 자식), +(인접 형제), ~(형제 전체) 같은 기호로

관계를 더 엄밀히 지정할 수 있다.

.parent .child { /* parent 내부의 child만 선택 */ }
.parent > .child { /* parent의 직계 child만 선택 */ }

위 예시에서 사용된
.SingleChoice_at-question-entry__5HWTb input[type=checkbox]는

자손 조합 선택자로, “해당 투표 항목 컨테이너 내부에 있는 체크박스만”

선택한다는 뜻이다.

 

※ 자손 조합 선택자(=자손 결합자)란?

표현	CSS 공식 용어	의미
A B (공백 " " 사용)	자손 결합자(Descendant combinator)	A 내부의 모든 B 선택
A > B (">" 사용)	자식 결합자(Child combinator)	A 바로 아래의 B만 선택

---

2) 클래스명 .checkbox-hidden만 쓰지 않고 조합 선택자를 쓴 이유

A 방식)
.checkbox-hidden { display: none; }

B 방식)
.SingleChoice_at-question-entry__5HWTb input[type=checkbox] { display: none; }

 

[A] 클래스명만 쓰면 전역 적용 위험

 

이는 문서(또는 앱) 전체에서 .checkbox-hidden이 붙은 모든 요소에 적용된다.

• SPA이거나 컴포넌트가 많은 대규모 프로젝트라면
• 다른 페이지·다른 컴포넌트에서도 동일 클래스명을 쓸 가능성이 크다.

그 경우 의도치 않게 다른 페이지의 체크박스까지 숨겨지는 부작용이 발생한다.

[B] 조합 선택자는 범위를 명확히 한정한다

 

이 선택자는 오직 특정 투표 항목 컴포넌트 내부의 체크박스만 숨긴다.

따라서

• 다른 메뉴나 페이지의 체크박스는 영향받지 않음
• 전역 스타일 오염을 예방
• 컴포넌트 기반 개발 방식과 잘 맞음 (React/Vue 등)

[C] 클래스명은 의미 표시에 유용하지만,
스타일 적용 대상은 구조로 한정하는 편이 안전

 

.checkbox-hidden이라는 이름은 의미(semantic)를 전달하지만,

실제로 누가 숨길지는 CSS 규칙이 결정한다.

 

구조 기반 선택으로 “어디에 적용할지”를

분명히 하면 유지보수성·안전성이 높아진다.

---

3) 요약 — 조합 선택자를 쓴 실무적 이점

• 정확성: 특정 컴포넌트 내부에만 스타일 적용 가능
• 안전성: 동일 클래스명을 가진 다른 요소에 대한 의도치 않은 영향 방지
• 컴포넌트 친화성: 모듈화·SPA 환경에서 안정적 동작
• 기능/디자인 분리 유지: input 기능은 남기고, 디자인은 커스텀 div에서 처리

결론적으로 해당 사이트는 .checkbox-hidden이라는 의미 있는 클래스명을 남기되,

실제 스타일 적용은 상위 컨테이너 + input 타입을 조합한 선택자로 한정함으로써

안전하고 예측 가능한 스타일링을 구현한 것이다.