ページの先頭へ
トップに戻る
2017年2月4日 Web制作

リストの最初(最後)だけborderを消す3つの方法

ボーダーのみのシンプルなリストを作成する時、リストの最初(最後)の項目だけボーダーを非表示にしたい!って事がよくあると思います。

この表現は簡単なコードで実現出来るんですが、方法が大きく分けて3通りあります。どちらを使うかはお好みでどうぞ。

まずはサンプルを

解説用に、li要素にborder-topを指定しただけのサンプルを用意しました。

See the Pen rjvryX by Kuzlog (@Kuzlog) on CodePen.

こういうリストだと一番上のボーダーが余計ですよね。これを簡単なCSSで消しましょう。

ネガティブマージンを使う方法

See the Pen MJGqeK by Kuzlog (@Kuzlog) on CodePen.

ul要素にoverflow:hidden;を指定した上でli要素全体を上に1px移動させ、ボーダー部分を隠しています。

このやり方でも問題無いんですが、無理矢理隠してる感が否めない上にリスト全体が1pxズレてしまうのであまりオススメはしない。

疑似クラスを使う方法

疑似クラスを使う方法は2種類ありますが、どちらを使っても動作は変わりません。

:first-child

See the Pen MJGqme by Kuzlog (@Kuzlog) on CodePen.

:first-childで最初の要素のみボーダーを消しています。コードの分かりやすさと対応ブラウザの多さを考えると、これが一番無難な方法なのかなぁ。

:not(:first-child)

See the Pen JEvayO by Kuzlog (@Kuzlog) on CodePen.

ちょっと見慣れない書き方かもしれませんが、:not(:first-child)と書けば最初の要素以外を指定出来るので、それらにボーダーを適用しています。

先程の:first-childを使った方法より無駄のないスマートな書き方だと思うんですが、IE8以下はこの疑似クラスが使えないので注意。
以上、リスト装飾の小ネタでした。