ボーダーのみのシンプルなリストを作成する時、リストの最初（最後）の項目だけボーダーを非表示にしたい！って事がよくあると思います。
この表現は簡単なコードで実現出来るんですが、方法が大きく分けて3通りあります。どちらを使うかはお好みでどうぞ。
解説用に、li要素にborder-topを指定しただけのサンプルを用意しました。
|
1 2 3 4 5 6 7 |
<ul class="checklist"> <li>ListItem.1 <li>ListItem.2 <li>ListItem.3 <li>ListItem.4 <li>ListItem.5 </ul> |
|
1 2 3 4 5 6 7 8 |
ul{ list-style: none; } li{ padding: 8px 0; border-top: 1px solid #444; } |
See the Pen rjvryX by Kuzlog (@Kuzlog) on CodePen.
こういうリストだと一番上のボーダーが余計ですよね。これを簡単なCSSで消しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
ul{ overflow: hidden; list-style: none; } li{ margin-top: -1px; padding: 8px 0; border-top: 1px solid #444; } |
See the Pen MJGqeK by Kuzlog (@Kuzlog) on CodePen.
ul要素にoverflow:hidden;を指定した上でli要素全体を上に1px移動させ、ボーダー部分を隠しています。
このやり方でも問題無いんですが、無理矢理隠してる感が否めない上にリスト全体が1pxズレてしまうのであまりオススメはしない。
疑似クラスを使う方法は2種類ありますが、どちらを使っても動作は変わりません。
|
1 2 3 4 5 6 7 |
li{ padding: 8px 0; border-top: 1px solid #444; } li:first-child{ border: none; } |
See the Pen MJGqme by Kuzlog (@Kuzlog) on CodePen.
:first-childで最初の要素のみボーダーを消しています。コードの分かりやすさと対応ブラウザの多さを考えると、これが一番無難な方法なのかなぁ。
|
1 2 3 4 5 6 7 |
li{ padding: 8px 0; } li:not(:first-child){ border-top: 1px solid #444; } |
See the Pen JEvayO by Kuzlog (@Kuzlog) on CodePen.
ちょっと見慣れない書き方かもしれませんが、:not(:first-child)と書けば最初の要素以外を指定出来るので、それらにボーダーを適用しています。
先程の:first-childを使った方法より無駄のないスマートな書き方だと思うんですが、IE8以下はこの疑似クラスが使えないので注意。
以上、リスト装飾の小ネタでした。
