SCSS 중첩 선택자: .parent { .children {} } 와 & > .children {}의 차이

SCSS로 스타일을 작성하다 보면 다음과 같은 중첩 선택자를 자주 마주치게 됩니다.

.parent {
  .children {
    color: red;
  }

  & > .children {
    color: blue;
  }
}

 

언뜻 보기엔 비슷해 보이지만, 결과적으로 완전히 다른 셀렉터가 생성됩니다.
이 글에서는 두 문법의 차이점과 사용 목적을 명확히 정리해봅니다.

 

1. 기본 개념: SCSS 중첩 문법

SCSS(Sass)는 중첩(Nesting)을 지원해서, 다음처럼 작성할 수 있습니다

.parent {
  .children {
    color: red;
  }
}

 

이는 다음 CSS로 컴파일됩니다

.parent .children {
  color: red;
}

• 즉, .parent 클래스 내부에 있는 모든 .children 요소에 스타일이 적용됩니다.
  
  

 

2. & > .children의 의미

&는 현재 셀렉터를 참조하는 SCSS 문법입니다.

.parent {
  & > .children {
    color: blue;
  }
}

 

컴파일 결과는 다음과 같습니다

.parent > .children {
  color: blue;
}

 

여기서 >는 직계 자식(Direct Child) 선택자입니다.
즉, .custom의 직속 자식 중에서 .children 클래스가 있는 요소만 매칭됩니다.

 

 

 

---

실제 DOM 구조에서 차이 비교

아래와 같은 HTML 구조가 있다고 가정해봅시다

<div class="parent">
  <div class="children">1번: 직계 자식</div>
  <div>
    <div class="children">2번: 손자 요소</div>
  </div>
</div>

 

적용 결과 비교

선택자	1번 (직계)	2번 (손자)
.custom .children	적용됨	적용됨
.custom > .children	적용됨	무시됨

 

 

---

언제 어떤 문법을 써야 할까?

상황	추천 문법	이유
모든 하위 요소에 스타일 적용	.parent { .children {} }	간결하고 범용적
구조가 명확히 정해져 있고, 직계 자식만 대상일 때	.parent { & > .children {} }	구조 안정성 확보 가능 (예: 예상치 못한 자식 요소 무시)

 

 

 

 

---

 

 

정리

 

문법	의미	CSS 결과	적용 대상
.parent { .children {} }	하위 .children에 적용	.parent .children	자식, 손자 등 모든 후손
.parent { & > .children {} }	직계 자식 .children에만 적용	.parent > .children	오직 직속 자식만