2列あるリストで最後の行だけスタイルを指定する疑似クラス CSS

リストでメニューを作る時、一番最後だけ効果をつけたくないことがあります。そんなときは:last-childの疑似クラスを指定すればいいのですが、レスポンシブデザインでは困った事があります。例えば、画面の大きさによって、2カラムになるようなメニューを作っている場合は、右のカラムの最後だけしか消えてくれません。

CSSでlast-child

こんな風に2カラムになったときは、それぞれのカラムの一番下を消したくなります。

nth-last-child(2):nth-child(odd)を使う

nth-last-childの組み合わせ
そんな時は nth-last-child(2) と nth-child(odd) の組み合わせ。
nth-last-child(2) は最後から2番目という指定、でもこれだけでは1カラムの時にスタイルがあたってしまうので、nth-child(odd) で奇数の時という条件を加えます。これで最後から2番目かつ奇数の時だけスタイルを適応できます。

サンプルソースコード

HTML

CSS

こんな風に疑似クラスは複数個同時に指定する事が出来ます。

コーディングおすすめの本
  • このエントリーをはてなブックマークに追加
« »

経営者と経営者の妻が沖縄で楽しく生きるためのアレコレ デザイン・カメラ・ロードバイク・旅・畑

© 2017 やまぐち家の生態