이제 우리가 즐겨 사용하는 CSS 전처리기 기능 중 하나인 중첩 스타일 규칙이 이 언어에 내장되어 있습니다.
중첩하기 전에 모든 선택기를 서로 별도로 명시적으로 선언해야 했습니다. 이로 인해 반복이 발생하고, 스타일시트가 대량으로 생성되고, 작성 환경이 분산됩니다.
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; }
중첩 후에 선택기를 계속할 수 있고 선택기와 관련된 스타일 규칙을 그룹 내에서 그룹화할 수 있습니다.
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } }
중첩은 선택기를 반복할 필요를 줄이는 동시에 관련 요소의 스타일 규칙을 공동으로 배치하여 개발자를 지원합니다. 또한 타겟 HTML에 스타일이
일치하도록 할 수도 있습니다. 이전 예의 .nesting
구성요소가 프로젝트에서 삭제된 경우 파일에서 관련 선택기 인스턴스를 검색하는 대신 전체 그룹을 삭제할 수 있습니다.
중첩의 이점: - 구성 - 파일 크기 줄이기 - 리팩터링
중첩은 Chrome 112부터 사용할 수 있으며 Safari Technical Preview 162에서 사용할 수도 있습니다.
CSS 중첩 시작하기
이 게시물의 나머지 부분에서는 선택 항목을 시각화하는 데 다음 데모 샌드박스가 사용됩니다. 이 기본 상태에서는 아무것도 선택되지 않고 모든 항목이 표시됩니다. 다양한 모양과 크기를 선택하여 구문을 연습하고 실제로 작동하는 것을 확인할 수 있습니다.
샌드박스 안에는 원, 삼각형, 사각형이 있습니다. 어떤 제품은 소형, 중형
대형입니다. 다른 색상은 파란색, 분홍색 또는 보라색입니다. 모두 .demo
가 포함된 요소 내에 있습니다. 다음은 타겟팅할 HTML 요소의 미리보기입니다.
<div class="demo">
<div class="sm triangle pink"></div>
<div class="sm triangle blue"></div>
<div class="square blue"></div>
<div class="sm square pink"></div>
<div class="sm square blue"></div>
<div class="circle pink"></div>
…
</div>
중첩 예
CSS 중첩을 사용하면 다른 선택기의 컨텍스트 내에서 요소의 스타일을 정의할 수 있습니다.
.parent {
color: blue;
.child {
color: red;
}
}
이 예에서 .child
클래스 선택기는 .parent
클래스 선택기 내에 중첩되어 있습니다. 즉, 중첩된 .child
선택기는 .parent
클래스가 있는 요소의 하위 요소에만 적용됩니다.
또는 상위 클래스를 배치해야 하는 위치를 명시적으로 나타내기 위해 &
기호를 사용하여 이 예를 작성할 수도 있습니다.
.parent {
color: blue;
& .child {
color: red;
}
}
이 두 가지 예시는 기능적으로 동일합니다. 이 문서에서 고급 예를 살펴보면서 옵션이 있는 이유를 더 명확하게 설명합니다.
원 선택
이 첫 번째 예에서는 스타일을 추가하여 데모 내의 원만 페이드 아웃하고 흐리게 처리합니다.
현재 CSS는 중첩을 사용하지 않는 경우:
.demo .circle {
opacity: .25;
filter: blur(25px);
}
중첩을 사용하는 경우 다음과 같은 두 가지 유효한 방법이 있습니다.
/* & is explicitly placed in front of .circle */
.demo {
& .circle {
opacity: .25;
filter: blur(25px);
}
}
사용하여
/* & + " " space is added for you */
.demo {
.circle {
opacity: .25;
filter: blur(25px);
}
}
결과: .circle
클래스가 있는 .demo
내부의 모든 요소가 흐리게 처리되어 거의 보이지 않습니다.
삼각형과 사각형 선택
이 작업에서는 여러 개의 중첩된 요소(그룹 선택기라고도 함)를 선택해야 합니다.
현재 CSS를 중첩을 사용하지 않는 경우 다음 두 가지 방법이 있습니다.
.demo .triangle,
.demo .square {
opacity: .25;
filter: blur(25px);
}
또는 :is()
사용
/* grouped with :is() */
.demo :is(.triangle, .square) {
opacity: .25;
filter: blur(25px);
}
중첩을 사용하는 경우 다음과 같은 두 가지 유효한 방법이 있습니다.
.demo {
& .triangle,
& .square {
opacity: .25;
filter: blur(25px);
}
}
사용하여
.demo {
.triangle, .square {
opacity: .25;
filter: blur(25px);
}
}
결과, .circle
요소만 .demo
내부에 남게 됩니다.
큰 삼각형 및 원 선택
이 작업에는 요소를 선택하려면 두 클래스가 모두 있는 복합 선택기가 필요합니다.
현재 CSS는 중첩을 사용하지 않는 경우:
.demo .lg.triangle,
.demo .lg.square {
opacity: .25;
filter: blur(25px);
}
사용하여
.demo .lg:is(.triangle, .circle) {
opacity: .25;
filter: blur(25px);
}
중첩을 사용하는 경우 다음과 같은 두 가지 유효한 방법이 있습니다.
.demo {
.lg.triangle,
.lg.circle {
opacity: .25;
filter: blur(25px);
}
}
사용하여
.demo {
.lg {
&.triangle,
&.circle {
opacity: .25;
filter: blur(25px);
}
}
}
결과: 큰 삼각형과 원이 모두 .demo
내부에 숨겨집니다.
복합 선택기 및 중첩이 포함된 전문가 팁
&
기호는 중첩된 선택자를 결합하는 방법을 명시적으로 보여주므로 여기서 유용하게 사용할 수 있습니다. 다음 예를 참고하세요.
.demo {
.lg {
.triangle,
.circle {
opacity: .25;
filter: blur(25px);
}
}
}
유효한 중첩 방법이지만 결과가 예상 요소와 일치하지는 않습니다.
&
가 복합적으로 결합된 .lg.triangle,
.lg.circle
의 원하는 결과를 지정하지 않으면 실제 결과는 .lg .triangle, .lg
.circle
, 하위 선택기가 되기 때문입니다.
분홍색을 제외한 모든 도형 선택
이 작업에는 요소에 지정된 선택기가 있으면 안 되는 부정 함수 유사 클래스가 필요합니다.
현재 CSS는 중첩을 사용하지 않는 경우:
.demo :not(.pink) {
opacity: .25;
filter: blur(25px);
}
중첩을 사용하는 경우 다음과 같은 두 가지 유효한 방법이 있습니다.
.demo {
:not(.pink) {
opacity: .25;
filter: blur(25px);
}
}
사용하여
.demo {
& :not(.pink) {
opacity: .25;
filter: blur(25px);
}
}
결과: 분홍색이 아닌 모든 도형은 .demo
내부에 숨겨집니다.
&
의 정확성과 유연성
:not()
선택기로 .demo
을(를) 타겟팅하려고 한다고 가정해 보겠습니다. 이를 위해서는 &
가 필요합니다.
.demo {
&:not() {
...
}
}
그러면 .demo :not()
가 필요한 이전 예와 달리 .demo
및 :not()
가 .demo:not()
로 결합됩니다. 이 알림은 :hover
상호작용을 중첩하려는 경우에 매우 중요합니다.
.demo {
&:hover {
/* .demo:hover */
}
:hover {
/* .demo :hover */
}
}
추가 중첩 예
중첩을 위한 CSS 사양에는 더 많은 예가 포함되어 있습니다. 예를 통해 구문에 대해 자세히 알아보려면 유효한 예와 잘못된 예가 다양하게 나와 있습니다.
다음 몇 가지 예에서는 CSS 중첩 기능을 간단히 소개하여 이 기능이 제공하는 다양한 기능을 이해하는 데 도움을 줍니다.
@media 중첩
선택기와 스타일을 수정하는 미디어 쿼리 조건을 찾기 위해 스타일시트의 다른 영역으로 이동하면 매우 산만해질 수 있습니다. 컨텍스트 내에서 조건을 중첩하면 이러한 방해 요소가 사라집니다.
문법 편의를 위해 중첩 미디어 쿼리가 현재 선택기 컨텍스트의 스타일만 수정하는 경우 최소한의 문법을 사용할 수 있습니다.
.card {
font-size: 1rem;
@media (width >= 1024px) {
font-size: 1.25rem;
}
}
&
를 명시적으로 사용하는 방법도 있습니다.
.card {
font-size: 1rem;
@media (width >= 1024px) {
&.large {
font-size: 1.25rem;
}
}
}
이 예에서는 &
가 포함된 확장된 구문을 보여주며 .large
카드를 타겟팅하여 추가 중첩 기능이 계속 작동하는 것을 보여줍니다.
@rules 중첩에 대해 자세히 알아보세요.
어디서나 사용 가능
지금까지의 모든 예는 이전 컨텍스트에 계속되거나 추가되었습니다. 필요한 경우 컨텍스트를 완전히 변경하거나 다시 정렬할 수 있습니다.
.card {
.featured & {
/* .featured .card */
}
}
&
기호는 문자열이 아닌 선택기 객체에 대한 참조를 나타내며 중첩 선택기의 어디에나 배치할 수 있습니다. 여러 번 배치할 수도 있습니다.
.card {
.featured & & & {
/* .featured .card .card .card */
}
}
이 예는 별로 쓸모가 없어 보이지만, 선택기 컨텍스트를 반복하는 것이 편리한 시나리오가 분명히 있습니다.
잘못된 중첩의 예
유효하지 않은 몇 가지 중첩 구문 시나리오가 있으며, 전처리기에 중첩되어 있다면 놀라실 수도 있습니다.
중첩 및 연결
많은 CSS 클래스 이름 지정 규칙은 선택기를 문자열인 것처럼 연결하거나 추가할 수 있는 중첩에 의존합니다. 이 방법은 CSS 중첩에서는 작동하지 않습니다. 선택기는 문자열이 아니고 객체 참조이기 때문입니다.
.card {
&--header {
/* is not equal to ".card--header" */
}
}
더 자세한 설명은 사양에서 확인할 수 있습니다.
까다로운 수습 기간 예시
선택기 목록 및 :is()
내에 중첩
다음과 같은 중첩 CSS 블록을 고려해 보세요.
.one, #two {
.three {
/* some styles */
}
}
이 예시는 선택기 목록으로 시작한 다음 계속해서 중첩되는 첫 번째 예입니다. 이전 예는 선택기 목록으로만 끝났습니다. 이 중첩 예에는 잘못된 것이 없지만 선택기 목록 내부의 중첩에 관한 구현 세부정보가 까다로울 수 있습니다(특히 ID 선택기가 포함된 목록).
중첩 인텐트가 작동하도록 안쪽에 가장 중첩되지 않는 선택기 목록은 브라우저에서 :is()
로 래핑됩니다. 이 래핑은 작성된 컨텍스트 내에서 선택기 목록 그룹화를 유지합니다. 이 그룹화인 :is(.one, #two)
의 부작용은 괄호 안에 있는 선택기에서 가장 높은 점수의 특이성을 채택한다는 것입니다. 이는 :is()
가 항상 작동하는 방식이지만, 중첩 문법을 사용하면 작성된 것과 정확히 다르기 때문에 놀랄 수 있습니다. 요령은 요약되었습니다. ID와 선택기 목록을 중첩하면 선택기의 특이성이 매우 높아질 수 있습니다.
까다로운 예를 명확하게 요약하자면, 이전 중첩 블록이 다음과 같이 문서에 적용됩니다.
:is(.one, #two) .three {
/* some styles */
}
ID 선택기를 사용하는 선택기 목록 내부에 중첩할 때 주의를 기울이거나 린터에 경고를 보내도록 학습시키면 해당 선택기 목록 내에서 모든 중첩의 특이성이 높아집니다.
중첩 및 선언 혼합
다음과 같은 중첩 CSS 블록을 고려해 보세요.
.card {
color: green;
& { color: blue; }
color: red;
}
.card
요소의 색상은 blue
입니다.
상호 혼합된 스타일 선언은 중첩이 발생하기 전에 작성된 것처럼 상단으로 호이스팅됩니다. 자세한 내용은 사양에서 확인할 수 있습니다.
해결 방법이 있습니다. 다음은 작성자가 의도한 대로 계단식 순서를 유지하는 &
의 세 가지 색상 스타일을 래핑합니다. .card
요소의 색상은 빨간색이 됩니다.
.card {
color: green;
& { color: blue; }
& { color: red; }
}
실제로, 중첩을 따르는 모든 스타일을 &
로 래핑하는 것이 좋습니다.
.card {
color: green;
@media (prefers-color-scheme: dark) {
color: lightgreen;
}
& {
aspect-ratio: 4/3;
}
}
특성 감지
CSS 중첩 감지 기능에는 중첩을 사용하거나 @supports
를 사용하여 중첩 선택기 파싱 기능을 확인하는 두 가지 기능이 있습니다.
중첩 사용:
html {
.has-nesting {
display: block;
}
.no-nesting {
display: none;
}
}
@supports
사용:
@supports (selector(&)) {
/* nesting parsing available */
}
제 동료인 브라무스는 이 전략을 보여주는 훌륭한 코펜을 보유하고 있습니다.
Chrome DevTools로 디버깅
현재 DevTools의 중첩 지원은 최소 수준입니다. 현재는 스타일 창에 스타일이 예상대로 표시되지만, 중첩 및 전체 선택기 컨텍스트 추적은 아직 지원되지 않습니다. Google은 이를 투명하고 명확하게 만들기 위한 설계와 계획을 갖추고 있습니다
Chrome 113에서는 CSS 중첩을 추가로 지원할 계획입니다. 조금만 더 기다려 주시기 바랍니다.
앞으로
CSS 중첩은 버전 1에만 있습니다. 버전 2에는 문법적 요소가 더 많아지고 기억해야 할 규칙이 적어질 수 있습니다. 중첩의 파싱이 제한되거나 까다로운 순간을 발생시켜야 할 수요가 많습니다.
중첩은 CSS 언어를 크게 개선합니다. CSS의 거의 모든 아키텍처 측면에 작성에 영향을 미칩니다. 버전 2를 효과적으로 지정하려면 먼저 이러한 큰 영향을 심층적으로 살펴보고 이해해야 합니다.
마지막으로 @scope
, 중첩, @layer
를 모두 사용하는 데모를 참조하세요. 이 모든 것이 매우 흥미롭습니다.