nth-childより、nth-of-typeを使おう
公開日:
最終更新日:
CSS設定してて、なんか思い通りにならない。nth-childが違う所を参照するんだけど!ってことないですか?
nth-childは【同じタグ】ではなく【同じ親要素を持つタグ】に反応します。
そのため、兄弟要素に違うタグが混じっていても、そいつもカウントしちゃうわけです。
それって、ちょっと使いにくいですよね。
同じタグだけで取りたい時は、nth-of-typeがオススメです!
nth-childは参照先がずれる
上記のサンプルを見ていただきたいのですが、最初にh2タグがあり、同じ階層に兄弟要素としてpタグが並んでいます。
こういう状況はよくあると思いますが、ここで1つ目と2つ目の文章を強調したいと思い、p:nth-child(1)とp:nth-child(2)を指定すると、おかしなことが起きます。
1つ目に指定したp:nth-child(1)がどこにも反映されず、2つ目に指定したp:nth-child(2)が1文目に適応されます。
これはp:nth-child(1)が「pタグの1番目に適応」ではなく「1番目がpタグなら適応」という識別の仕方になっているからです。
nth-of-typeなら同じタグの中でn番目を参照できる
では、「pタグの1番目に適応」にしたい場合はどうするのか?
ここでnth-of-typeの出番です。p:nth-of-type(1)では、「pタグにタグタイプが一致する物の中で1番目に適応」になるので、思い通りの挙動が実現できます。
以下のサンプルを見てください。
HTML・スタイルは同じで、タグの指定部分のみnth-childからnth-of-typeに変更しています。
思い通りの形になっているはずです。
宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。