nth-of-typeで間違いやすい使い方【css】

nth-of-typeで間違いやすい使い方【css】

nth-of-typeって便利ですね。

でも、たまーに「あれっ、なんで効かないの?」ってなったことないですか?

これ知ってるだけで、周囲に2人います。

なので、今回はそんなハマりやすいnth-of-typeの事例を紹介していきましょう。

擬似要素:nth-of-type

nth-of-typeは、子要素の中で〇〇番目に指定する書き方です。

もっと有名なのは、first-of-typelast-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-typebeforeを組み合わせて使うこともできます。

<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のルールブックみたいなもので、その最新バージョンです。

どちらも翻訳あり。

少しむずかしめの内容なので、ホント参考程度にどうぞ。

まとめ

というわけで、思いつきで書いてしまいました。

あっさりしすぎてるので、いずれ書き加えていきます。

タイトルとURLをコピーしました