ここで話題になるのは以下のような疑似クラス
- first-child
- last-child
- nth-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
これらは要素のはじめ・終わり・n番目など選択できる疑似クラス
そしてクラス名と合わせて使う時に問題が起きます。
自分も理解ができていなかったので、
child系やtype系をクラス名指定で使うときの注意点をまとめました。
このページの目次
１．nth-child など child系 へのクラス名指定の落とし穴
まず初めに child系 の疑似クラスについて
例 ： first-child 、last-child 、nth-child、etc…
これにはクラス名指定で１つ落とし穴があります。
とはいえクラス名が指定不可ではありません。
次みたいに、その挙動に落とし穴がありました。
実際に nth-child にクラス名指定できるか実験
では早速実験。
今回は :nth-child を使ってみます。
▼ まず用意したのはこういうHTML
|
1 2 3 4 5 6 7 |
<div class="parent"> <div class="hoge"></div> <div class="hoge"></div> <div class="fuga"></div> <div class="fuga"></div> <div class="fuga"></div> </div> |
▼ div要素共通のCSS
|
1 2 3 4 5 |
.parent div{ width: 250px; height: 32px; margin: 8px auto; background: lightgray; } |
▼ デフォルトの見た目
上２つは .hoge を持つdiv要素、
その下３つは .fuga を持つdiv要素
そしてまずは .hoge に対して次のCSSを適用
▼ 背景を background: ligthgreen; にするCSS
|
1 2 3 |
.parent .hoge:nth-child(2){ background: lightgreen; } |
このCSSですが、、、
「hogeクラスを持つ要素の２番目に適用される」
、、、と思うのがよくある勘違い。でも期待通りに動きます。
▼ 実際にCSS適用後の見た目
一見すると div.hoge の２番目に適用されてるように見えて厄介です。
そして .hoge というクラス名も無視されてる訳ではありません。
その証拠は次で分かります。
▼ 今度は .fuga に次のCSSを適用
|
1 2 3 |
.parent .fuga:nth-child(2){ background: lightgreen; } |
▼ その結果はコチラの画像
この通り .fuga:nth-child(2) は適用されません。
＜なぜなら .fuga は子要素の２番目には存在しないから＞
子要素の２番目は 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) と置き換えれば、効かない理由が理解できるはずです。
２．nth-of-typeなど type系 へのクラス名指定のワナ
そして child系と同様に・・・
xxx-type系もクラス指定の落とし穴アリです。
例 ： nth-of-type、nth-of-first、nth-of-last、etc…
といってもクラスが指定できない訳ではありません。
どういうことかというと次の通り
クラス指定した要素で nth-of-type の実験
たとえば以下のようなHTMLを作成
|
1 2 3 4 5 6 7 |
<div class="parent"> <div class="hoge"></div> <div class="hoge"></div> <div class="fuga"></div> <div class="fuga"></div> <div class="fuga"></div> </div> |
まあさっきと同じですが・・・
なのでCSSとかは省略します。
そして .hoge に対して以下CSSを適用しました。
▼ １番目の背景色を変えるCSS
|
1 2 3 |
.parent .hoge:nth-of-type(1){ background: lightgreen; } |
▼ このCSS適用後の見た目
なんか正しく反映されてるように見えます。
でも .hoge の１番目に対して適用された訳じゃありません。
どういうことかは次のCSSを試せば分かります。
▼ .fuga に対して次のCSSを適用
|
1 2 3 |
.parent .fuga:nth-of-type(2){ background: lightgreen; } |
▼ これを適用した後の見た目
はい、:nth-child と同じく適用されません。
でも次のCSSにすると適用されます。
▼ :nth-of-type(3) に変更してみた
|
1 2 3 |
.parent .fuga:nth-of-type(3){ background: lightgreen; } |
▼ 今度は適用された
そして重要なのは子要素の３番目に適用されたこと
決して .fuga の３番目に適用されないってことですね。
この性質は 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) などした場合、【クラス名を基準に３番目】という意味にはならない。純粋にクラス関係なしの兄弟要素の３番目の適用になる。:first-child 、:last-child なども同じ
- nth-of-typeなど type系の場合
＝＞ たとえば .example:nth-of-type(5) などした場合、【クラス名を基準に５番目】とはならない。クラス関係なしに兄弟要素の５番目に適用される。firts-of-type、last-of-type なども同様
以上、nth-child とか nth-of-type でクラス名指定する注意点などでした。
意外とハマりがちなので気を付けたいです。ではまた。
