CSSの :nth-child、:nth-of-type などにクラス名を使う落とし穴

ここで話題になるのは以下のような疑似クラス

  • first-child
  • last-child
  • nth-child
  • first-of-type
  • last-of-type
  • nth-of-type
  • nth-last-of-type

これらは要素のはじめ・終わり・n番目など選択できる疑似クラス

そしてクラス名と合わせて使う時に問題が起きます。

自分も理解ができていなかったので、
child系やtype系をクラス名指定で使うときの注意点をまとめました。

1.nth-child など child系 へのクラス名指定の落とし穴

まず初めに child系 の疑似クラスについて

例 : first-child 、last-child 、nth-child、etc…

これにはクラス名指定で1つ落とし穴があります。

とはいえクラス名が指定不可ではありません。

次みたいに、その挙動に落とし穴がありました。

実際に nth-child にクラス名指定できるか実験

では早速実験。

今回は  :nth-child  を使ってみます。

 

▼ まず用意したのはこういうHTML

▼ div要素共通のCSS

▼ デフォルトの見た目

この5つのdiv要素で :nth-child にクラス名指定したときの挙動を確認してみる

上2つは .hoge  を持つdiv要素、

その下3つは .fuga  を持つdiv要素

 

そしてまずは .hoge  に対して次のCSSを適用

▼ 背景を background: ligthgreen;  にするCSS

このCSSですが、、、

hogeクラスを持つ要素の2番目に適用される

、、、と思うのがよくある勘違い。でも期待通りに動きます。

▼ 実際にCSS適用後の見た目

.hoge:nth-child(2) を適用したときの様子。一見期待通りの見た目になったように見えるが・・・

一見すると div.hoge  の2番目に適用されてるように見えて厄介です。

そして .hoge  というクラス名も無視されてる訳ではありません。

 

その証拠は次で分かります。

▼ 今度は .fuga  に次のCSSを適用

▼ その結果はコチラの画像

.fuga:nth-child(2) を適用したときの様子。今度はなぜか反映されていない?

この通り .fuga:nth-child(2)  は適用されません。

<なぜなら .fuga  は子要素の2番目には存在しないから>

子要素の2番目は div.hoge  になってます。

 

つまりどういうことかというと・・・

  • nth-child はクラス名を無視しない
    => 普通に .hoge:nth-child(2n)  とかでも有効
  • でもクラス基準な位置指定はできない
    => あるクラス名からn番目 とかの指定が不可能

こういう性質があるってことですね。

当たり前のように見えて 意外と忘れがちな事実

 

そしてクラス基点で位置指定できないのは以下全部です。

  • nth-child
  • first-child
  • last-child
  • nth-last-child
  • only-child

よく使う :first-child  は :nth-child(1) と置き換えれば、効かない理由が理解できるはずです。

2.nth-of-typeなど type系 へのクラス名指定のワナ

そして child系と同様に・・・

xxx-type系もクラス指定の落とし穴アリです。

例 : nth-of-type、nth-of-first、nth-of-last、etc…

といってもクラスが指定できない訳ではありません。

どういうことかというと次の通り

クラス指定した要素で nth-of-type の実験

たとえば以下のようなHTMLを作成

まあさっきと同じですが・・・

なのでCSSとかは省略します。

 

そして .hoge  に対して以下CSSを適用しました。

▼ 1番目の背景色を変えるCSS

▼ このCSS適用後の見た目

.hoge:nth-of-type(1) を適用したときの様子。期待通りの見た目になったように見えるが・・・

なんか正しく反映されてるように見えます。

でも .hoge  の1番目に対して適用された訳じゃありません。

 

どういうことかは次のCSSを試せば分かります。

.fuga  に対して次のCSSを適用

▼ これを適用した後の見た目

.fuga:nth-of-type(2) を適用したときの様子。 nth-child と同じくクラス名指定でのスタイルが反映されない

はい、:nth-child と同じく適用されません。

 

でも次のCSSにすると適用されます。

:nth-of-type(3)  に変更してみた

▼ 今度は適用された

nth-of-type(3) を適用したときの様子。今度はスタイルが反映された

そして重要なのは子要素の3番目に適用されたこと

決して .fuga  の3番目に適用されないってことですね。

 

この性質は nth-of-type 以外にも言えます。

  • nth-of-type
  • first-of-type
  • last-of-type
  • nth-last-of-type
  • only-of-type

もちろんクラス名自体は指定できます。

でも【クラス基準で位置指定できない】がキモです。

ここまでのまとめ

ということで簡単にまとめ

  • nth-childとかのchild系の場合
    => たとえば .example:nth-child(3)  などした場合、【クラス名を基準に3番目】という意味にはならない。純粋にクラス関係なしの兄弟要素の3番目の適用になる。:first-child 、:last-child なども同じ
  • nth-of-typeなど type系の場合
    => たとえば .example:nth-of-type(5)  などした場合、【クラス名を基準に5番目】とはならない。クラス関係なしに兄弟要素の5番目に適用される。firts-of-type、last-of-type なども同様

以上、nth-child とか nth-of-type でクラス名指定する注意点などでした。

意外とハマりがちなので気を付けたいです。ではまた。

CSS

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください