• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2018/03/19
書いた人:
rurippa!
カテゴリ:
CSS   Web制作   ネタ
31,025 views

複数行あるリストの最後の行だけ、余白を変えたい!スタイルを変えたい!…などにお役立ちTipsです。

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

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

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

最後の行だけ適用しよう(2列の場合)

list-style-css_sample

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

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

  <style>

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

      background-color: pink;

    }
  </style>

  

liが3つの場合

  • box
  • box
  • box

liが4つの場合

  • box
  • box
  • box
  • box

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

最後の行だけ適用しよう(2列以上の場合、今回は4列編)

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

list-style-css_sample2

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

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



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

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

    background-color: skyblue;

  }

  

liが6つの場合

  • box
  • box
  • box
  • box
  • box
  • box

liが12個の場合

  • box
  • box
  • box
  • box
  • box
  • box
  • box
  • box
  • box
  • box
  • box
  • box

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

参考サイト:Keith Clark

今回のポイント

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

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

まとめ

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


この記事を読んだ人はこんな記事も読んでいます