
nth-of-typeって便利ですね。
でも、たまーに「あれっ、なんで効かないの?」ってなったことないですか?
これ知ってるだけで、周囲に2人います。
なので、今回はそんなハマりやすいnth-of-typeの事例を紹介していきましょう。
擬似要素:nth-of-type
nth-of-type
は、子要素の中で〇〇番目に指定する書き方です。
もっと有名なのは、first-of-type
やlast-of-type
かもしれませんね。
じゃあ、さっそくちょっと一般的なやつをやってみましょ。
<ul>
<li>1番目のほぼ</li>
<li>2番目のほぼ</li>
<li>3番目のほぼ</li>
</ul>
おあつらえ向きの<ul>です。
この2番目の文字色を赤くしてみましょう。
li:nth-of-type(2) {
color: red;
}
- 1番目のほぼ
- 2番目のほぼ
- 3番目のほぼ
と、これは大丈夫ですね。
ハマりやすい例
はい、もうさっそく本題です。
<ul>
<li>
<h3>1番目のほぼ</h3>
<p>ほぼほぼなテキスト1</p>
</li>
<li>
<h3>2番目のほぼ</h3>
<p>ほぼほぼなテキスト2</p>
</li>
<li>
<h3>3番目のほぼ</h3>
<p>ほぼほぼなテキスト3</p>
</li>
</ul>
このレイアウト構造な時、2番目の<li>の中にある<h3>の文字色を変えたい場合。
もうなんだか、ゴリゴリ答え言っちゃいます。
li:nth-of-type(2) h3 {
color: red;
}

ってな感じになります。
ハマってしまう時って、li h3:nth-of-type(2)
と指定しているはずです。
あくまでも、2番目のリストの中の<h3>なわけです。
なので、li:nth-of-type(2) h3
となります。
そもそも、この書き方自体、知らない方もいらっしゃると思います。
たぶん、擬似要素ってさいごの要素にくっつけて書くイメージがあるので、li h3:nth-of-type(2)
ってしてしまうじゃないかと…
なので、どうぞどうぞ、ここで覚えてもらったらいいかもしれませぬ。
一応、上で見たhtmlレイアウトの親子関係を確認しておきましょうか。
<ul>
<li>
<h3>1番目のほぼ</h3>
<p>ほぼほぼなテキスト1</p>
</li>
<li>
<h3>2番目のほぼ</h3>
<p>ほぼほぼなテキスト2</p>
</li>
<li>
<h3>3番目のほぼ</h3>
<p>ほぼほぼなテキスト3</p>
</li>
</ul>
- 親:<ul> 子:<li>
- 親:<li> 子:<h3> <p>
- 兄弟:<h3> <p>
んじゃ、もう1ついきましょう。
といっても、さっきの続きです。
<ul>
<li>
<h3>1番目のほぼ</h3>
<p>ほぼほぼなテキスト1</p>
</li>
<li>
<h3><span>2番目</span>のほぼ</h3>
<p>ほぼほぼなテキスト2</p>
</li>
<li>
<h3>3番目のほぼ</h3>
<p>ほぼほぼなテキスト3</p>
</li>
</ul>
今度は、2番目の<li>の<h3>の中の<span>の部分、「2番目」の文字だけ色を変えたい場合。
もう予想ついてる人もいるかもしれませんな。
li:nth-of-type(2) h3 span {
color: red;
}

はい、そうです。
正解です。
li:nth-of-type(2) h3 span
でよろしいのであります。
なぜ、こんなことをしているのか?
ここまで読んだ人の中には、クラスをつければ、いいんじゃないのって?って思われる方もいるはずです。
話は簡単で、仕事をするようになるとワードプレスというものを触っていくことになるんですね。
だいたいの場合。
で、そんな時にクラスをつけれない時があるわけです。
簡単にと言いましたが、たぶんぜんぜんイメージできないと思います…
とにかく、そういうことなのです。
はい、ここからは文字数稼ぎです。
それを心して、ご覧ください 笑
nth-of-typeとbeforeの合わせ技
nth-of-type
とbefore
を組み合わせて使うこともできます。
<ul>
<li>1番目のほぼ</li>
<li>2番目のほぼ</li>
<li>3番目のほぼ</li>
</ul>
この<li>の2番目にbefore
を指定してみましょう。
li:nth-of-type(2)::before {
content:"始";
color:red;
}
- 1番目のほぼ
- 2番目のほぼ
- 3番目のほぼ
と、こんな感じにできてしまいますね。
あっ、after
ももちろんできちゃいますよ。
ちなみに、li::before:nth-of-type(2)
だと上手くいきません。
あくまで、2番目の<li>の中のbefore
ってことで、nth-of-type
が先になります。
ちなみに、これ使った経験1度くらい…
参考サイト
この「nth-of-type」は、CSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新バージョンです。
どちらも翻訳あり。
少しむずかしめの内容なので、ホント参考程度にどうぞ。
まとめ
というわけで、思いつきで書いてしまいました。
あっさりしすぎてるので、いずれ書き加えていきます。