リストの最後の行だけ、スタイルを適用する方法

リストの最後の行だけ、○○したいんだけど・・
と悩んでしまった人＆いつか悩むかもしれない人へのTipsです♪

※サンプルのHTMLは、背景色付きのliを並べただけです。

最後の行だけ適用しよう（２列の場合）

２列の場合は、最後の行の要素が１つor２つの時では指定方法が変わりますよね。
１つで固定の場合はlast-childだけで大丈夫です。

どちらになっても大丈夫な指定をするなら、
last-childで一番最後にある要素を指定し、
さらに最後から２つめの要素が奇数ならその要素を選択する…という指定ができればOKです！

  <style>

    /* 最後の要素 + 最後から２つ目のliが奇数の場合、その要素 */
    li:last-child,li:nth-last-child(2):nth-child(odd) {

      background-color: pink;

    }
  </style>

  

最後行が１つでも２つでもバッチリできました*\(^o^)/*

最後の行だけ適用しよう（２列以上の場合、今回は４列編）

２列の場合は、先ほどの方法で指定できますが、
今回は少し違う方法になります。

まず、li:nth-child(4n+1)で、一番左側の列を指定します。
それに加えて、:nth-last-child(-n+4)を記載する事で、
一番左下の要素を指定できるようにするのがポイントです。

それより後ろにあるliは、「~」を使って指定できればOKです！

  /* ４列リストの一番左下にある要素 */
  li:nth-child(4n+1):nth-last-child(-n+4),

  /* ４列リストの一番左下にある要素以降にあるliすべて */
  li:nth-child(4n+1):nth-last-child(-n+4) ~ li {

    background-color: skyblue;

  }

  

こちらも最後行の要素数が異なっていても、無事に反映されました*\(^o^)/*

参考サイト：Keith Clark

今回のポイント

今回のポイントは、この２点です。意外に知らなかった！という方もいらっしゃると思いますので、確認してみてくださいね。

• 擬似クラス(nth-child系)は : で繋ぐことで、条件を絞り込める
• CSSセレクタの” ~ ” は、~の後にある要素を指定できる

まとめ

どうでしたか？
少しややこしかったかもしれませんが、いざというときに役立ていただけたらと思います(^^)