nth-childと:nth-​​of-typeの違い

そのようなHTMLがあるとしましょう:

<セクション>

< p >リトル< / p >

< p >貯金箱< / p > <!-このアイテムが必要->

< /セクション>


次のCSSは同じことを行います。

p :nth- child 2 { ; }


p :nth-​​of- type 2 { ; }




もちろん、これらのセレクターには違いがあります。



疑似クラス:nth-​​childは次の 場合に要素を選択することを意味します

  1. この要素は段落です。
  2. これは、単一の親の2番目の要素です。


擬似クラス:nth-​​of-typeの意味:

  1. 1つの親の2番目の段落を選択します。


マークアップが次のように変更されたとします:

<セクション>

< h1 >単語< / / h1 >

< p >リトル< / p >

< p >貯金箱< / p > <!-このアイテムが必要->

< /セクション>


現在、最初のオプションは機能しません。

p :nth- child 2 { ; } / *動作しない* /


2番目は引き続き機能します。

p :nth-​​of- type 2 { ; } / *引き続き動作* /


「機能しない」とは、 :nth-child



セレクターが「ピギー」ではなく「リトル」という単語を選択することを意味します。 要素は両方の条件を満たしているため:1)これは親要素の2番目の要素であり、2)これは段落です。 「Continues to work」とは、これが親要素の2番目の段落であるため、セレクターが「Piggy」として選択され続けることを意味します。



<h1>



<h2>



後に<h2>



を追加すると、次の要素を持つセレクタは、段落が2番目の要素ではなくなるため、 何も選択しません。 :nth-of-type



:nth-of-type



のセレクターは引き続き機能します。



私には思え:nth-of-type



脆弱性:nth-of-type



少なく、一般的にはより便利です:nth-child



は引き続き主要な作品です。 「段落の場合、親ブロックの2番目の要素を選択したい」と思う頻度はどれくらいですか。 たぶん時々ですが、「2番目の段落を選択する」または「表の3行ごとに選択する」と思う方が多いでしょう。



「なぜnth-childでセレクターが機能しないのですか」と言うときのほとんどの状況は、タグの選択を忘れてしまい、必要なタグが必要なタグにならないことが原因です。 したがって、 :nth-child



を使用する場合は、親から指定し、タグバインディングを使用しないことをお勧めします。

dl :nth- child 2 { } / *このオプションは* /よりも優れています

dd n 番目の 2 { } / * this * /


しかし、もちろん、それはすべて特定の状況に依存します。



ブラウザのサポート:nth-of-type



かなりまともです... Firefox 3.5 +、Opera 9.5 +、Chrome 2 +、Safari 3.1 +、IE 9+。 より深いサポートが必要な場合はjQueryを使用します(セレクターを使用し、必要に応じてクラスを適用します)が、jQueryはサポートを停止しました:nth-of-type



。 まれに使用することでそれを聞いたが、私には奇妙に思える。 このルートに進みたい場合、 サポートを返すプラグインを次に示します



All Articles