2022/3/15 （更新日: 2022/3/16）

【CSS】リストの最初（最後）のみborderを消す方法

CSS

リストで最初のみborderを消すのってどうやるの？

そんな疑問にお答えします。

borderを指定してリストを作成する場合、最初（最後）の項目のみborderを非表示にしたいってことがあります。

その場合どのようなコードで表現するのかを見ていきましょう。

1 リストの最初（最後）のみborderを消す
2 :first-child
3 隣接セレクタ
4 :not(:first-child)

リストの最初（最後）のみborderを消す

下の図のように最初と最後はborderを非表示にするコードを書いていきます。

borderを非表示にする例

これは考え方としては割と簡単です。

「border-top」で指定しておき最初のborderのみを非表示にすれば完成します。

そしてその方法は以下の３つです。

: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)で指定するのがコードもシンプルでわかりやすいと思います。

それぞれ使ってみて自分にあった書き方を見つけましょう。

以上です。

コメントを残すコメントをキャンセル

投稿者トシ