[css]リスト間に横棒（罫線）を入れる方法と考え方

今更だけど。

基本形
一般的だと思う構成
両端と中で線を変えたい場合
別パターン

基本形

こんなのがある。

<ul>
    <li>ああああああああああ</li>
    <li>ああああああああああ</li>
    <li>ああああああああああ</li>
    ︙
</ul>

<li>は縦並びで、<li>と<li>の間に横線を引きたい。加えて、上下両端にも横線を引きたい。

一般的だと思う構成

CSSリセットは割愛、要点だけ。

普通に考えられるのはこれ。

li{
    border-bottom: 1px solid #000;
}
li:first-child{
    border-top: 1px solid #000;
}

last-childでも同じ。

li{
    border-top: 1px solid #000;
}
li:last-child{
    border-bottom: 1px solid #000;
}

こんなのもある。

li{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
li + li{
    margin-top: -1px;
}

上下の線が並ぶのでmarginでずらして重ねる。

両端と中で線を変えたい場合

<ul>を活用する。

ul{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
li + li{
    border-top: 1px solid #ddd;
}

<li>だけでやる。

li{
    border-top: 1px solid #ddd;
}
li:first-child{
    border-top: 1px solid #000;
}
li:last-child{
    border-bottom: 1px solid #000;
}

上書きが気持ち悪いならこうなる。

li + li{
    border-top: 1px solid #ddd;
}
li:first-child{
    border-top: 1px solid #000;
}
li:last-child{
    border-bottom: 1px solid #000;
}

別パターン

<ul>の中身は一貫した内容にしたいところだけど、たまに先頭の<li>をタイトル用途にする場合がある。

<ul>
    <li class="title">タイトル</li>
    <li>ああああああああああ</li>
    <li>ああああああああああ</li>
    ︙
</ul>

逆に末尾だけ違うものにしたりとか。

<ul>
    <li>ああああああああああ</li>
    <li>ああああああああああ</li>
    <li>ああああああああああ</li>
    ︙
    <li class="link"><a href="">more</a></li>
</ul>

こういうときは前項みたいな:first-child、:last-childの使い方ができない。大体デザインも変わるから、個別指定して除外するなり上書きするなりでやっていくことになる。:first-child、:last-childでやっていってもいいんだけどclassを振って指定できるようにするのが安心。

で、どうするかなんだけど、いくらでもやりようはあるけど、上書きでやっていくのが個人的な推奨方法。

li + li{
    border-top: 1px solid #000;
}
li.title + li{
    border-top: 1px solid red;
}
li.link{
    border-top: 1px solid red;
}

大したことを書かない割に行数が増えるのは気持ち悪いんで、極力<ul>内で別の役割をするものは作りたくない。

でもまあ、そんな感じで。