リストでボーダー(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;
}