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

  • Posted on
  • Category : 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;
}

Back to Top

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

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

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。