2025.09.22最終更新日：2025.09.22

【CSS入門】リストの2つ目以降にだけ余白をつける3つの方法

こんにちは。五平餅くんです。

リスト（ul li）を作るとき、項目どうしの間に余白をつけたいことがありますよね。
でも、最初の項目だけは余白をつけたくないケースが多いです。

こういうときに使える「2つ目以降だけに余白をつける方法」を3つ紹介します。

1 方法①：li + li を使う
2 方法②：:not(:first-child) を使う
3 方法③：nth-child(n+2) を使う
4 リストの2つ目以降にだけ余白をつける3つの方法の表
5 初心者におすすめの選び方

方法①：`li + li` を使う

<div class="inner">
  <ul class="just-ul">
    <li>リストだよ。最初のliにはmargin-topがつかないよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
  </ul>
</div>

/* リセット */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ベース設定 */
.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: '・';
}

/* ！ここから重要！２つ目以降に余白をつける */
.just-ul li + li {
  margin-top: 15px;
}

デモはこちら

どういう意味？

「直前にliがあるli」にだけ当たるルールです。
だから、自然と2つ目以降にだけ余白がつきます。

メリット

一番シンプルで分かりやすい書き方

デメリット

途中に別のタグ（例：<p>）が入ると効かなくなる

方法②：`:not(:first-child)` を使う

<div class="inner">
  <ul class="just-ul-02">
    <li>リストだよ。最初のliにはmargin-topがつかないよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
  </ul>
</div>

.just-ul-02 li:not(:first-child) {
  margin-top: 15px;
}

デモはこちら

どういう意味？

:first-child は「最初の子要素」
:not(:first-child) は「最初じゃない子要素」
つまり2つ目以降にだけ余白がつきます。

メリット

「最初を除外する」と書いてあるので意図が分かりやすい

デメリット

少しコードが長く見える

方法③：`nth-child(n+2)` を使う

<div class="inner">
  <ul class="just-ul-03">
    <li>リストだよ。最初のliにはmargin-topがつかないよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
    <li>リストだよ。2つ目以降にmargin-topがつくよ</li>
  </ul>
</div>

.just-ul-03 li:nth-child(n+2) {
  margin-top: 15px;
}

デモはこちら

どういう意味？

nth-child は「○番目の子要素」という指定
n+2 は「2番目以降ぜんぶ」
だから2つ目以降に余白がつきます。

メリット

「3つ目から」など自由に調整できる
応用が効く

デメリット

n+2 の意味が初心者には少し分かりづらい

リストの2つ目以降にだけ余白をつける3つの方法の表

この３つを表にまとめるとこんな感じになります。

書き方	メリット	デメリット
①`li + li`	シンプルで覚えやすい	他の要素が入ると効かない
`②:not(:first-child)`	「最初以外」と分かりやすい	コードが長め
③`nth-child(n+2)`	何番目からでも指定できる	意味が分かりづらい