SIMこんにちは、SIMです。
今回はCSSで「偶数・奇数・○番目・○番目以降」の要素を指定するセレクタを紹介します。
つまり「nth-of-type」と「nth-child」の使い方の紹介です。これは実案件でも使用頻度が高い小技ですね。
nth-of-typeとnth-childのちがい
SIMまずは非常に紛らわしいnth-of-typeとnth-childの違いから紹介します。
これは実例で説明した方が早いので、分かりやすい例として次の２つの違いから見ていきましょう。
- .li-a:nth-of-type(2)
- .li-b:nth-child(2)
See the Pen nth-of-typeとnth-child by Satoru Shimizu (@sat-simizu) on CodePen.
SIMnth-of-type(2)はliタグの2番目を
nth-child(2)は1番目を装飾しているのが分かります。
つまり、まとめると次のようになります。
.li-a::nth-of-type(2)
- li (class=”li-a”)タグの中から2番目を選ぶ
- 兄弟要素のh3「タイトル」はタグの種類がli(class=”li-a”)ではないので無視
.li-a::nth-child(2)
- h3タグを含んだすべての兄弟要素の上から2番めを選ぶ
- 兄弟要素のh3「タイトル」タグも選択範囲に含まれる
SIMどっちが直感的に使いやすいかというと、断然「nth-of-type」だと思うよ。
○番目｜nth-of-type
SIM上で説明したので、実例は省略します。
○番目指定の「nth-of-type」の使い方をまとめておくと、下のとおり。
- セレクタ::nth-of-type()の()の中に○番目の○を入れればOK
- 例1：2番目指定：セレクタ::nth-of-type(2)
- 例2：5番目指定：セレクタ::nth-of-type(5)
偶数指定｜nth-of-type
SIM次は偶数番目の要素をnth-of-typeで指定する方法です。
実例のCodePenはこちら。
See the Pen nth-of-type｜偶数 by Satoru Shimizu (@sat-simizu) on CodePen.
SIM方法をまとめると次のようになります。
- セレクタ::nth-of-type()の()の中にevenまたは2nを入れる(どちらでもよい)
- 例：セレクタ::nth-of-type(even)
- 例：セレクタ::nth-of-type(2n)
奇数指定｜nth-of-type
SIM次は奇数番目の要素をnth-of-typeで指定する方法です。
See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.
SIM方法をまとめると次のとおり。
- セレクタ::nth-of-type()の()の中にoddまたは2n-1を入れる(どちらでもよい)
- 例：セレクタ::nth-of-type(odd)
- 例：セレクタ::nth-of-type(2n-1)
○番目以降｜nth-of-type
SIM最後は○番目以降の要素をnth-of-typeで指定する方法です。
下の例は３番目以降を指定した場合
See the Pen nth-of-type｜○番目以降 by Satoru Shimizu (@sat-simizu) on CodePen.
SIM方法をまとめると…
- セレクタ::nth-of-type()の()の中に○番目以降ならn+○を入れる
- 例：３番目以降：セレクタ::nth-of-type(n+3)
- 例：５番目以降：セレクタ::nth-of-type(n+5)
まとめ
SIM今回は、CSSで特定の兄弟要素の指定方法を紹介しました。
慣れれば簡単ですし、使えるシーンも多いと思うので是非使ってみて下さいね。
