css3 n 번째 유형의 클래스로 제한됨

css3 n 번째 유형의 클래스로 제한됨

---

이 질문에 이미 답변이 있습니다.

• : nth-child () 또는 : nth-of-type ()을 임의의 선택기와 결합 할 수 있습니까? 6 답변

CSS3 nth-of-type를 클래스 로 제한하는 방법이 있습니까? section레이아웃 요구 사항을 지정하는 다양한 클래스 가있는 동적 요소가 있습니다. 매 3 .module일 마다 잡고 싶지만 nth-of-type클래스 요소 유형을 찾은 다음 유형을 계산하는 것 같습니다 . 대신 .modules 로 제한하고 싶습니다 .

감사!

시연 할 JSFiddle : http://jsfiddle.net/danielredwood/e2BAq/1/

HTML :

<section class="featured video">
    <h1>VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (3)</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO</h1>
</section>
<section class="featured module">
    <h1>NOT A VIDEO (6)</h1>
</section>

CSS :

.featured {
  width:31%;
  margin:0 0 20px 0;
  padding:0 3.5% 2em 0;
  float:left;
  background:#ccc;
}
  .featured.module:nth-of-type(3n+3) {
    padding-right:0;
    background:red;
  }
  .featured.video {
    width:auto;
    padding:0 0 2em 0;
    float:none;
  }​

---

안타깝게도 nth-of-type클래스 를 선택할 수 있는 방법이 없습니다 (적어도 내가 아는) nth-of-class. 3 분의 1마다 .module수동으로 새 클래스를 추가해야 할 것입니다 .

---

당신이 정말로 원하는 것은 css4 : nth-match selector 인 것 같지만 아직 대부분의 브라우저에서 실제로 지원되지 않으므로 현재 유일한 방법은 자바 스크립트를 사용하는 것입니다.

$(".featured.module").filter(function(index, element){
    return index % 3 == 2;
}).addClass("third");

http://jsfiddle.net/w3af16dj/

참고 URL : https://stackoverflow.com/questions/10921809/css3-nth-of-type-restricted-to-class