CSS `n번째 유형`이 특정 클래스를 기반으로 요소를 선택할 수 있습니까?

CSS 3 n번째 유형을 클래스로 제한할 수 있나요?

CSS 3에서는 n번째 유형 선택기를 사용할 수 있습니다. 유사한 요소 그룹 내의 위치를 ​​기반으로 특정 요소를 선택합니다. 그러나 이 선택기는 해당 클래스를 기반으로 요소 타겟팅을 허용하지 않습니다.

질문:

특정 클래스에 n번째 유형을 적용할 수 있습니까? 예를 들어, .module 클래스를 사용하여 어떻게 세 번째 요소를 모두 타겟팅할 수 있습니까?

답변:

안타깝게도 CSS는 내장된 n번째 요소를 제공하지 않습니다. 클래스 선택자. 이는 n번째 유형을 특정 클래스로 직접 제한하는 것이 불가능하다는 것을 의미합니다.

해결책:

원하는 효과를 얻으려면 새로운 세 번째 .module마다 수동으로 클래스를 지정합니다. 이는 JavaScript 또는 Sass와 같은 전처리기를 사용하여 수행할 수 있습니다.

다음은 JavaScript를 사용하는 예입니다.

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

추가 클래스가 적용되면 다음 CSS 규칙을 사용하여 대상을 지정할 수 있습니다. 매 세 번째 .module:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

이 해결 방법은 n번째 클래스 전용 모듈만큼 우아하지는 않을 수 있습니다. 선택기를 사용하면 기존 CSS 기능과 JavaScript를 사용하여 원하는 기능을 얻을 수 있습니다.

위 내용은 CSS `n번째 유형`이 특정 클래스를 기반으로 요소를 선택할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!