普段は使える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を極める上で避けて通れませんよ!
Author Profile
Latest entries
- 2018.04.16プロフェッショナルインタビュー【企業編】広島から全国、そして世界を目指す!株式会社MIRAIのハイレイヤー分析
- 2016.10.21プロフェッショナルインタビュー【企業編】【後編】「夢があればブラックじゃない」福岡の技術集団オルターブースはベーシスト小島氏と愉快な仲間たち
- 2016.10.18プロフェッショナルインタビュー【企業編】【前編】福岡の技術集団オルターブース。楽曲を作れると思ってCOBOLを書いていたベーシスト小島氏と愉快な仲間たち
- 2016.09.02プロフェッショナルインタビュー【フリーランス編】【後編】代理店の仕事は気が楽だけど、それでも直接受ける案件が大事。JUSO Coworkingオーナー深沢さんの仕事