リストの最終行だけ下線を引かない【CSS】

ulやolで作るリストでは、CSSを使って項目ごとにアンダーラインを表示することができます。ただ、リストの周囲を枠線で囲った場合、最終行のアンダーラインは邪魔に感じていました。

今回は、疑似クラスを使ってリストの最終項目に下線を引かないようにしてみたいと思います。

基本のリスト構造
リストの項目ごとに下線を引く
最終行の下線を表示しない方法
1. :last-of-type を使う場合
2. :not() を使う場合

基本のリスト構造

今回の記事でご紹介するリストを構成するHTMLは、次の通りです。

基本コード

<ul class="#">
  <li>リストテキスト1</li>
  <li>リストテキスト2</li>
  <li>リストテキスト3</li>
  <li>リストテキスト4</li>
</ul>

クラス名だけは「#」の部分を書き換えて使います。

リストの項目ごとに下線を引く

まずは、下線を表示してみましょう。

サンプル

.sample-1{
  border: 4px solid #9393cc;
  border-radius: 10px;
  padding: 0.2em 1em;
  width: 80%;
}
.sample-1 ul{
  list-style: none;
  padding: 1em;
}
.sample-1 li{
  border-bottom: 2px dashed #9393cc;
}
.sample-1 li::before{
  content: "・ ";
}
</style>

リストテキスト1
リストテキスト2
リストテキスト3
リストテキスト4

一番最後の行には下線が無いほうがいいカモ…

最終行の下線を表示しない方法

リスト内の最終行に下線を引かないよう設定するには、CSSの疑似クラスを使うと簡単です。

:last-of-type を使う場合

:last-of-typeは、兄弟要素の中で、指定した要素と同一のタイプを対象として、最後にある子要素を指定する疑似クラスです。

「最後にある子要素」ということは、「リストの最終項目」という指定が可能ですね。

サンプルコード

.sample-2{
  /* 省略 */
}
.sample-2 ul{
  /* 省略 */
}

.sample-2 li{
  border-bottom: 2px dashed #9393cc;
}
.sample-2 li:last-of-type{
  border-bottom: none;
}
.sample-2 li::before{
  content: "・";
  padding-right: 5px;
}

li:last-of-typeと指定することで、ul内の最後のliには下線「なし」という指定を加えています。

リストテキスト1
リストテキスト2
リストテキスト3
リストテキスト4

:not() を使う場合

:not()は、「()」の中に指定した条件とは一致しない要素にスタイルを設定します。

CSS3で追加されたセレクタで、否定疑似クラスと呼ばれています。これを知るとCSSの可能性がグッと広がります。

今回は、「最終項目以外に線を引く」という構文にしたいので、次の2つの疑似クラスを組み合わせます。

:not()

リストの最終項目以外に適用させるために使用します。

:last-of-type

:notのカッコ内に記述して条件として使います。

サンプルコード

<div class="sample-3">
  <ul>
    <li>リストテキスト1</li>
    <li>リストテキスト2</li>
    <li>リストテキスト3</li>
    <li>リストテキスト4</li>
  </ul>
</div>

.sample-3{
  /* 省略 */
}
.sample-3 ul{
  /* 省略 */
}

.sample-3 li::before{
  content: "・";
  padding-right: 5px;
}
.sample-3 li:not(:last-of-type){
  border-bottom: 2px dashed #ccc;
}

結果が同じでも、コードがとてもシンプルです。