CSS / 2026 모던 CSS 2026.06.02

Part 3:CSS 네스팅(Nesting)과 & 선택자

2026년 현재 모든 브라우저에서 지원되는 CSS 네스팅 문법과 & 선택자를 자세히 알아봅니다. Sass 네스팅과의 차이점과 실전 활용법까지 포함합니다.

Part 3: CSS 네스팅(Nesting)과 & 선택자

2023년 말부터 본격적으로 지원되기 시작한 CSS 네스팅(Nesting)은 많은 개발자들이 “이제 Sass 없이도 충분하다”고 느끼게 만든 가장 큰 이유 중 하나입니다. 2026년 현재는 Chrome, Firefox, Safari, Edge 모두에서 완전히 지원되고 있으며, 실무에서도 충분히 안전하게 사용할 수 있는 수준에 도달했습니다.

이번 파트에서는 CSS 네스팅의 기본 문법부터 & 선택자의 정확한 사용법, Sass 네스팅과의 차이점, 그리고 실전에서 어떻게 활용하는지까지 자세히 알아보겠습니다.

1. CSS 네스팅이란?

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

22살에 과일 판매로 매출 1000만원 달성한 노하우

₩159,000

크몽

[투명톡+젤리 저스트미]

₩8,900

₩17,800

마리오케이스

[젤리 행운부적]

₩4,900

₩9,800

마리오케이스

CSS 네스팅은 HTML 구조처럼 CSS를 중첩해서 작성할 수 있게 해주는 기능입니다. 기존에는 부모 요소와 자식 요소의 스타일을 각각 따로 작성해야 했지만, 이제는 부모 선택자 안에 자식 스타일을 직접 넣을 수 있습니다.

.card {
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 15px rgb(0 0 0 / 0.1);

  /* 자식 요소 스타일 */
  .title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
  }

  .description {
    color: #64748b;
    line-height: 1.6;
  }
}

위 코드는 실제로 브라우저에서 아래와 같이 해석됩니다.

.card { ... }
.card .title { ... }
.card .description { ... }

이렇게 작성하면 HTML 구조와 CSS 구조가 비슷해져서 가독성이 크게 향상됩니다.

2. & 선택자의 역할과 사용법

&는 현재 부모 선택자를 가리키는 특수한 기호입니다. 특히 가상 클래스(:hover, :focus, :active)나 수정자 클래스(.active, .disabled)를 사용할 때 필수적으로 사용됩니다.

.card {
  /* 호버 효과 */
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px rgb(0 0 0 / 0.15);
  }

  /* 활성 상태 */
  &.active {
    border: 2px solid #0a66c2;
  }

  /* 비활성 상태 */
  &.disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  /* 가상 요소 */
  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
  }
}

최신 브라우저에서는 단순한 자식 선택자의 경우 &를 생략해도 동작하지만, 가상 클래스나 수정자 클래스를 사용할 때는 &를 명시하는 것이 더 안전하고 가독성도 좋습니다.

3. Sass 네스팅과 CSS 네스팅의 중요한 차이점

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

두 기술은 비슷해 보이지만, 내부적으로 처리되는 방식에 차이가 있습니다.

Sass 네스팅: 선택자를 문자 그대로 붙여서 컴파일합니다. 특정도가 그대로 유지됩니다.
CSS 네스팅: 부모 선택자를 내부적으로 :is()로 감싸서 처리합니다. 이 때문에 특정도가 달라질 수 있습니다.

대부분의 일반적인 사용(.card .title, &:hover)에서는 큰 문제가 없지만, 복잡한 선택자 조합을 할 때는 이 차이를 이해하고 있어야 합니다.

4. 실전 컴포넌트 예제

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: white;
  transition: all 0.2s ease;

  &:hover {
    box-shadow: 0 20px 25px rgb(0 0 0 / 0.15);
    transform: translateY(-4px);
  }

  .image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .content {
    padding: 20px;

    .title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 8px;
      color: #111827;
    }

    .price {
      font-size: 1.25rem;
      font-weight: 700;
      color: #0a66c2;
    }

    .description {
      color: #64748b;
      font-size: 0.95rem;
      line-height: 1.5;
    }
  }
}