CSS `nth-of-type` は特定のクラスの要素に限定できますか?

CSS 3 の nth-of-type を特定のクラスに制限する

質問:

CSS 3 の nth-of-type セレクターを改良して、次の要素のみをターゲットにする方法はありますか?特定のクラス?

背景:

個別のクラスによって示されるさまざまなレイアウトを特徴とする動的セクションを含むシナリオを考えてみましょう。目標は、他の要素に影響を与えることなく、「.module」クラスを使用して 3 つおきのセクションを強調表示することです。

解決策:

残念ながら、ネイティブな方法はありません。これは、nth-of-type を使用して実現します。その理由は、CSS で nth-of-class がサポートされていないためです。したがって、nth-of-type をクラスに制限することはできません。

代わりに、「.third-module」などの新しいクラスを 3 つおきのセクションに手動で追加する必要があります。 「.module」クラス。このカスタマイズされたクラスは、nth-of-type を使用してターゲットにできます。

HTML:

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

CSS:

.featured {
  width: 31%;
  margin: 0 0 20px 0;
  padding: 0 3.5% 2em 0;
  float: left;
  background: #ccc;
}

.featured.module.third-module:nth-of-type(3n+3) {
  padding-right: 0;
  background: red;
}

.featured.video {
  width: auto;
  padding: 0 0 2em 0;
  float: none;
}

このソリューションでは、「.third-module」クラスを持つ「.module」セクションのみが、 n 番目の型セレクターによって特にターゲットにされるため、必要なスタイルが設定されます。

以上がCSS `nth-of-type` は特定のクラスの要素に限定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。