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のルールブックみたいなもので、その最新バージョンです。
どちらも翻訳あり。
少しむずかしめの内容なので、ホント参考程度にどうぞ。
まとめ
というわけで、思いつきで書いてしまいました。
あっさりしすぎてるので、いずれ書き加えていきます。