タイトル通り、リストでボーダー(border)を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。
以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。
HTMLは以下のようにul
li
を利用した単純なものとします。
HTML
<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は以下のように記述します。
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
要素以外にスタイルを適応」というものになります。
CSS
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;
を記述することで、最初のボーダーが非表示になる見た目を実装できます。
CSS
ul {
overflow: hidden;
}
ul li {
margin-top: -1px;
border-top: 1px solid #aaa;
}
隣接セレクタ
隣接セレクタは「要素が隣接している場合にスタイルを適用」という動きになるので、li
要素がひとつしかない場合はスタイルが適用されず、2つ以上になった場合に2つ目以降のli
要素にスタイルを適用させることができます。
これを用いることで「:not + :first-child」の時のように少ない記述で最初と最後のボーダーが非表示になったリストを実装することができます。
CSS
ul li + li {
border-top: 1px solid #aaa;
}