ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS `nth-of-type` は特定のクラスの要素に限定できますか?

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

Linda Hamilton
リリース: 2024-12-24 06:56:10
オリジナル
550 人が閲覧しました

Can CSS `nth-of-type` be Limited to Elements with a Specific Class?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート