【CSS】:nth-childと:nth-last-childを組み合わせて、使うことないかもしれない活用方法

普段は使えるTipsを目的としてご紹介しているんですが、「あ、こんな使い方もあるのね」というのがあってもいいかなと思いまして、使うことが無いかもしれない活用方法をご紹介します。

:nth-child(n)

意外とよく使いますよね。
n番目の要素を指定するCSSの構造擬似クラスです。

:last-childなんかもよく使いますね。リストの最後だけ余白調整するとかボーダー調整するとか。

さて、今回は:nth-child(n)についてです。nには数字がはいりますが、2nと指定すると2の倍数の要素に適用します。表の背景で交互に色が違っていたり、ブロックレイアウトに使用したりします。

こんな指定の仕方もできるってご存知でした?

E:nth-child(3):nth-last-child(3)

前から3番目かつ、後ろから3番目だったときだけ適用します。

See the Pen wBJXOr by Tsukasa Nagata (@nt-uni) on CodePen.0

まさに設定したとおり、前から3番目&後ろから3番目のとき、つまり要素が5つあるときの中央のみ適用しています。

こういうときに使うのは常識だぜ!っていうレベルなのかもしれませんが、あまり見たことがなかったので興味深い指定方法だなと思いました!

まとめ

グリッドレイアウトでフォトギャラリーやブロックを並べるときはいいかもしれませんね。
ただこういう指定だとJavascriptで〜となっちゃいそうなので、やはりセレクタ擬似クラスはCSSを極める上で避けて通れませんよ!

フォローして続編をチェック

@universionsをフォロー