CSSでリストの最初と最後のボーダー(border)を非表示にする方法

Tips

CSSでリストの最初と最後のボーダー(border)を非表示にする方法

リストでボーダー(border)を指定しているけど最初と最後のボーダーは非表示にしたいという時に使えるCSSの小ネタです。
最初と最後とは言っていますが、要は最初のボーダーを非表示にするという感じで全部で4つの方法をご紹介します。

リストの最初と最後はボーダーを非表示に

以下で紹介しているのはいずれも上のイメージのようによく見るリストで、ボーダーが最初と最後に引かれていないものを実装する方法です。
HTMLは下記のようにulliを利用した単純なものとします。

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を指定しています。
あとは、親要素となるuloverflow: 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;
}

Posted on

Category : Tips

Close the search window,
please press close button or esc key.