

リストで最初のみborderを消すのってどうやるの?
そんな疑問にお答えします。
borderを指定してリストを作成する場合、最初(最後)の項目のみborderを非表示にしたいってことがあります。
その場合どのようなコードで表現するのかを見ていきましょう。
リストの最初(最後)のみborderを消す
下の図のように最初と最後はborderを非表示にするコードを書いていきます。
これは考え方としては割と簡単です。
「border-top」で指定しておき最初のborderのみを非表示にすれば完成します。
そしてその方法は以下の3つです。
-
:first-child
-
隣接セレクタ
- :not(:first-child)
See the Pen
border by toshi (@toshi78)
on CodePen.
共通HTML
<ul class="list">
<li class="item">リストの最初と最後はborderを非表示にします。</li>
<li class="item">リストの最初と最後はborderを非表示にします。</li>
<li class="item">リストの最初と最後はborderを非表示にします。</li>
<li class="item">リストの最初と最後はborderを非表示にします。</li>
<li class="item">リストの最初と最後はborderを非表示にします。</li>
</ul>
:first-child
.item {
border-top: 1px solid #808080;
}
.item:first-child {
border-top: none;
}
「:first-child」で最初の要素のみborderを消しています。
わかりやすいですがコードは2つ必要です。
隣接セレクタ
.item + .item {
border-top: 1px solid #808080;
}
上記は「.item」の次に来る「.item」に対して「border-top: 1px solid #808080;」を指定している状態です。
これで最初の要素には「border-top」が効きません。
:not(:first-child)
.item:not(:first-child) {
border-top: 1px solid #808080;
}
最初の要素以外にはスタイルを適用する、という書き方です。
「:not(:first-child)」「:not(:last-child)」という指定はコードも完結で非常に重宝する書き方です。
リストの最初のみborderを消す場合は、隣接セレクタもしくは:not(:first-child)で指定するのがコードもシンプルでわかりやすいと思います。
それぞれ使ってみて自分にあった書き方を見つけましょう。
以上です。
投稿者 トシ
コメントを残す