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

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

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

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

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

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

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

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

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

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

まとめ

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

Tsukasa Nagata

株式会社ユニマル代表取締役COO。「Web制作チームのためのクリエイティブ・プラットフォーム『universions』」では、UIデザイン・開発とマーケティング、色んなところに遊びにいくのが担当。