【CSS】最後の要素の区切り線を表示しない方法

パンクズなどで要素と要素の間に区切り線を書く時に、最後だけ非表示にする方法を解説します。

方法は2種類ある

最後の要素に区切り線をつけない方法は２通りある。

最後の要素以外に区切り線をつける方法と、すべての要素に区切り線をつけた後に最後の要素の区切り線を打ち消す方法だ。

マークアップはシンプルなリストにした。

<ul>
  <li>...</li>
  <li>...</li>
<ul>

最後の要素以外に区切り線をつける

.breadcrumb {
  display: flex;
  li {
    &:not(:last-child){
      &:after {
        content: "|";
      }
    }
  }
}

&:not(:last-child){ ... }で最後の要素以外を指定できる。

すべての要素に区切り線をつけてから打ち消す

.breadcrumb {
  display: flex;
  li {
    &:after {
      content: "|";
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
  }
}

&:after ですべての要素に区切り線をつけた後に&:last-child {で最後の要素をdisplay:noneで消している。

これで最後の区切り線を消すことができた。

リストじゃない時

さて問題はこのブログのカテゴリーとタグの部分である。<span>と<a>を並べてある。

<div class="post-category">
  <span>カテゴリー：</span>
  <a href="#">未分類</a>
  <a href="#">メモ</a>
</div>

その場合はこう書けばよい。

.post-category {
  a {
    &:not(:last-child){
      &:after {
        content: "|";
      }
    }
  }
}

li を a に変えるだけである。

終わりに

セレクタが変わったり入り混じってもやることは同じです。