リストでボーダー（border）を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。
最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。
以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。
HTMLは下記のようにul, liを利用した単純なものとします。
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>:first-child
基本的なボーダー指定でborder-topを記述し、:first-child擬似クラスを利用して最初のリストのみボーダーを非表示にする方法で、CSSは下記のように記述します。
ul li {
border-top: 1px solid #aaa;
}
ul li:first-child {
border-top: none;
}ちなみに、ここでは:first-childを使っていますが、nth-of-type()などを使う方法でももちろん実装できます。
:not ＋ :first-child
上と同じように:first-childを利用して最初のリストのみボーダーを非表示にする方法なのですが、それを:notと組み合わせて記述することで、下記のように少ない記述で実装することができます。
内容としては「最初に現れるli要素以外にスタイルを適応」というものになります。
ul li:not(:first-child) {
border-top: 1px solid #aaa;
}overflow ＋ negative margin
こちらはoverflowとネガティブマージンを組み合わせた方法になり、まず単純にli要素にborder-topを記述しますが、そこにmargin-top: -○○pxという感じでネガティブマージンを指定します。
ネガティブマージンの値はborder-top-widthと合わせる必要があり、今回のサンプルコードではborder-top-widthが1pxなので-1pxを指定しています。
あとは、親要素となるulにoverflow: hidden;を記述することで、最初のボーダーが非表示になる見た目を実装できます。
ul {
overflow: hidden;
}
ul li {
margin-top: -1px;
border-top: 1px solid #aaa;
}隣接セレクタ
隣接セレクタは要素が隣接している場合にスタイルを適用という動きになるので、li要素がひとつしかない場合はスタイルが適用されず、2つ以上になった場合に2つ目以降のli要素にスタイルを適用させることができます。
これを用いることで「:not ＋ :first-child」の時のように少ない記述で最初と最後のボーダーが非表示になったリストを実装することができます。
ul li + li {
border-top: 1px solid #aaa;
}