CSS에서도 이제 중첩이 된다니? – Nesting 처음 써본 후기

 

요즘은 자바스크립트 공부하느라 CSS를 건드릴 일이 줄어들었는데,
오랜만에 스타일을 짜다가 'CSS Nesting'이라는 걸 처음 알게 되었어요.

 

SCSS에서 중괄호 {}로 스타일을 중첩해서 작성하던 게 너무 익숙했는데,
이게 이제는 순수 CSS에서도 가능하다는 걸 이제야 알게 되다니..!
이미 알고 계신 분들도 많겠지만, 혹시 저처럼 몰랐던 분들을 위해 가볍게 정리해보려고 해요.

 

---

 

💡 CSS Nesting이란?

간단하게 말하면, CSS 안에서 자식 셀렉터를 중괄호로 감싸서 중첩해서 쓸 수 있는 기능이에요.
SCSS에서 아래처럼 많이들 써보셨을 거예요:

.card {
  .title {
    font-weight: bold;
  }
  .desc {
    color: #666;
  }
}

 

이제는 CSS에서도 거의 비슷하게 쓸 수 있어요! 🙌

 

---

 

기존 방식 vs Nesting 방식

✅ 기존 방식 (반복되는 클래스명)

.card {
  padding: 20px;
}
.card .title {
  font-weight: bold;
}
.card .desc {
  color: #666;
}

 

✅ Nesting 방식 (CSS에서도 가능!)

.card {
  padding: 20px;

  .title {
    font-weight: bold;
  }

  .desc {
    color: #666;
  }
}

 

---

 

✅ CSS Nesting 예시 모음

1. 자식 선택자 Nesting

가장 기본적인 형태로, 자식 요소의 스타일을 중첩해서 작성합니다.
@nest 없이도 사용 가능합니다.

.card {
  padding: 16px;

  .title {
    font-weight: bold;
  }

  .desc {
    color: #555;
  }
}

🔍 결과: .card .title, .card .desc

 

 

2. 상태 선택자 (:hover, :focus, 등)

부모 요소의 상태에 따라 스타일을 바꿔야 할 때 &를 사용합니다.

.button {
  background: #222;
  color: white;

  &:hover {
    background: #444;
  }

  &:focus {
    outline: 2px solid #aaa;
  }
}

🔍 결과: .button:hover, .button:focus

 

 

3. 조합 클래스 (&.active, &.disabled 등)

클래스명이 조합되는 경우에도 &를 붙여서 표현할 수 있습니다.

.tab {
  color: gray;

  &.active {
    color: black;
    font-weight: bold;
  }
}

🔍 결과: .tab.active

 

4. 형제 요소 선택 (+, ~)

형제 요소를 선택할 때도 Nesting이 가능합니다.

.label {
  font-size: 14px;

  + .input {
    margin-top: 4px;
  }
}

🔍 결과: .label + .input

 

 

5. 부모 요소 기준으로 역참조 (.wrapper .card 형태) → @nest 필요

현재 선택자가 뒤에 오는 경우에는 반드시 @nest가 필요합니다.

.card {
  @nest .wrapper & {
    margin-top: 20px;
  }
}

🔍 결과: .wrapper .card

 

 

6. 미디어 쿼리 안에서도 Nesting 가능

반응형 디자인에서도 Nesting을 활용할 수 있어요.

.container {
  display: flex;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

🔍 결과: .container { ... } 와 미디어쿼리 조건 안의 .container

 

 

⚠️ 주의할 점 – 브라우저 지원

모든 브라우저에서 되는 건 아니고요,

• ✅ Chrome 112 이상 > 출시 : 2023년 4월
• ✅ Firefox 117 이상 > 출시 : 2023년 8월
• ✅ Safari 16.5 이상 > 출시 : 2023년 5월

등 최신 브라우저부터 지원돼요.
IE나 구버전 브라우저를 고려해야 하는 프로젝트라면 아직은 사용을 피해야 할 수도 있어요.

혹시 불안하다면 조건부 사용도 가능합니다:

/* Nesting을 지원하지 않는 브라우저용 (기본 CSS) */
.card .title {
  color: blue;
}

/* Nesting을 지원하는 브라우저용 */
@supports (selector(&)) {
  .card {
    .title {
      color: blue;
    }
  }
}

🔍 이렇게 하면:

• Nesting을 지원하는 브라우저는 @supports 안의 걸 사용
• Nesting을 지원하지 않는 브라우저는 위쪽의 전통적인 방식 사용

@supports () : 특정 CSS 기능 지원 여부 확인

selector(&) : & 사용이 가능한지 확인 → 즉, CSS Nesting 지원 확인

 

---

 

✍ 마무리하며

CSS Nesting은 문법이 단순한 만큼 배우기도 쉽고,
코드를 구조적으로 정리할 수 있어서 유지보수에도 도움이 됩니다.
이제는 CSS 자체에서도 Nesting이 가능하다는 점,
꼭 한 번 써보시길 추천드려요!