디자인 아틀라스
EN
{} 최신 CSS·웹 기능

CSS 네이팅

Native CSS Nesting

Sass 없이 선택자를 부모 규칙 안에 그대로 중첩해서 쓰는 네이티브 CSS 문법. `&`로 부모를 참조합니다.

다른 이름: Nested CSS& selector
···
html
<div class="wrap">
  <div class="badge" id="badge"><svg viewBox="0 0 10 10"><path id="bpath" d="M1.5 5.2l2.6 2.6L8.5 2.4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span id="btext">확인 중</span></div>
  <div class="card" id="card">
    <div class="title">중첩 카드</div>
    <div class="body">호버해보세요 (2초마다 자동)</div>
  </div>
</div>
css
.wrap{position:relative;width:min(260px,92%)}
.card{
  padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);transition:background .3s,border-color .3s;
  .title{font-size:13px;font-weight:700;color:var(--fg)}
  .body{margin-top:4px;font-size:11px;color:var(--muted)}
  &.hover-sim{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--surface))}
}
.card.fallback-hover{border-color:var(--accent);background:rgba(91,91,247,.08)}
.badge{position:absolute;top:-30px;right:0;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--accent-3)}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}
js
const ok = CSS.supports('selector(&)');
const b=document.getElementById('badge'),p=document.getElementById('bpath'),t=document.getElementById('btext');
b.classList.toggle('no', !ok);
p.setAttribute('d', ok ? 'M1.5 5.2l2.6 2.6L8.5 2.4' : 'M2 2l6 6M8 2l-6 6');
t.textContent = ok ? '네이팅 지원됨' : '미지원 · flat CSS 폴백';
const card = document.getElementById('card');
const cls = ok ? 'hover-sim' : 'fallback-hover';
setInterval(() => card.classList.toggle(cls), 1800);

`.card .title`, `.card:hover`, `.card .body`처럼 같은 컴포넌트에 속한 선택자를 반복해서 적는 건 Sass/Less 전처리기가 오래 해결해 온 문제였습니다 — 전처리기 없이 순수 CSS만 쓰는 프로젝트는 이 반복을 그대로 감수해야 했습니다.

네이티브 중첩은 `.card { .title { ... } &:hover { ... } }`처럼 규칙 안에 규칙을 쓰게 해 줍니다. `&`는 부모 선택자를 가리키고, 자손 결합자를 생략하면 자동으로 하위 선택자로 취급됩니다. Sass 중첩과 동작이 100% 같지는 않아서(특히 `&` 없이 시작하는 중첩 규칙의 특이도 계산) 마이그레이션할 때 결과 CSS를 한 번 확인하는 게 안전합니다.

기본 지원은 caniuse/MDN baseline을 확인하세요. 미지원 브라우저에서는 여전히 빌드 시점에 Sass/PostCSS로 평평한(flat) CSS로 미리 컴파일하는 것이 표준 대안입니다.

언제 쓰나

전처리기 없이 컴포넌트 스코프 CSS를 짧게 쓰고 싶을 때, 빌드 스텝을 하나 줄이고 싶을 때.