CSS 중첩 구문 선택 도움말

Bramus

Adam Argyle

CSS 중첩의 구문 선택을 위한 이전 설문조사를 실시한 후 CSS 작업 그룹은 CSS에서 중첩을 정의하는 가장 좋은 방법에 대해 계속 논의했습니다. 토론 과정에서 새로운 문법 아이디어가 제안되었습니다. 작업 그룹이 이러한 문법 중에서 선택할 수 있도록 새로운 설문조사가 마련되었습니다.

옵션

이전 설문조사 결과에 따라 옵션 1과 2는 더 이상 고려되지 않습니다. 새로운 옵션 2개 (4, 5)가 추가되었습니다.

옵션 5: 최상위 중첩 컨테이너

선언과 중첩된 여러 스타일 규칙이 포함된 & { … } 블록이 포함된 최상위 @nest 규칙을 도입합니다.

@nest selector {
  & {
    property: value;
  }
  nested-selector {
    property: value;
  }
}

옵션 4: 접미어 제안

선언이 포함된 기본 규칙 뒤에 중첩된 규칙이 포함된 추가 코드 블록이 삽입됩니다.

selector {
  property: value;
} {
  nested-selector {
    property: value;
  }
}

옵션 3: 문자로 시작하지 않는 제안서

중첩된 모든 규칙이 기호가 아닌 문자로 시작하도록 요구하여 자체적으로 모호하지 않도록 합니다. 유형 선택기로 선택기를 시작해야 하는 경우 & div 또는 :is(div)를 작성할 수 있습니다.

selector {
  property: value;
  & nested-selector {
    property: value;
  }
}

위의 스니펫은 각 제안서의 기본사항을 보여주는 데만 사용되지만 새 설문조사와 함께 더 많은 예시가 포함되어 있습니다.

투표하기

투표하려면 https://webkit.org/blog/13607/로 이동하세요. 투표는 등록이 필요하지 않습니다. '옵션 5', '옵션 4' 또는 '옵션 3'을 선택하고 제출을 누릅니다.

투표하세요