ホームページ > ウェブフロントエンド > CSSチュートリアル > 特定の HTML 要素の選択において、`nth-child` セレクターと `nth-of-type` セレクターはどのように異なりますか?

特定の HTML 要素の選択において、`nth-child` セレクターと `nth-of-type` セレクターはどのように異なりますか?

Susan Sarandon
リリース: 2024-11-04 13:04:01
オリジナル
1036 人が閲覧しました

How do `nth-child` and `nth-of-type` selectors differ in selecting specific HTML elements?

nth-child または nth-of-type による特定の要素の選択

HTML では、以下に基づいてリスト内の特定の要素を選択する必要がある状況があります。マークアップ内の位置に関係なく、そのクラス名。これを実現するために、CSS は nth-child と nth-of-type という 2 つの重要なセレクターを提供します。

nth-child

nth-child を使用すると、相対的な位置に基づいて要素を選択できます。その兄弟たちに。たとえば、 div.myclass:nth-child(1) は、親コンテナ内の myclass クラスを持つ最初の要素を選択します。

例:

<code class="html"><div class="parent_class">
    <div class="myclass">my text1</div>
    <!-- omitted code -->
    <div class="myclass">my text2</div>
    <!-- omitted code -->
    <div class="myclass">my text3</div>
    <!-- omitted code -->
</div></code>
ログイン後にコピー
<code class="css">.parent_class:nth-child(1) { /* first .myclass within .parent_class */ }
.parent_class:nth-child(2) { /* second .myclass within .parent_class */ }
.parent_class:nth-child(3) { /* third .myclass within .parent_class */ }</code>
ログイン後にコピー

nth-of-type の使用

nth-of-type は nth-child に似ていますが、同じタグ名を持つ他の要素に対する相対的な位置に基づいて要素を選択します。この場合、 div.myclass:nth-of-type(1) は、異なるタグを持つ介在要素に関係なく、親コンテナ内の myclass クラスを持つ最初の要素を選択します。

例:

前と同じ HTML コードを使用します:

<code class="css">.myclass:nth-of-type(1) { /* first .myclass, regardless of its container */ }
.myclass:nth-of-type(2) { /* second .myclass, regardless of its container */ }
.myclass:nth-of-type(3) { /* third .myclass, regardless of its container */ }</code>
ログイン後にコピー

これらのセレクターを利用すると、指定されたクラス名の特定の要素を正確にターゲットにすることができ、複雑で動的なページ レイアウトが可能になります。文書構造内の位置に基づいて決定されます。

以上が特定の HTML 要素の選択において、`nth-child` セレクターと `nth-of-type` セレクターはどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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