回り込んだ左端要素を指定することは可能ですか？

Question

皆さんのお力添えをお願いします……!!

例えば次のようなリストがあったとして

  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
  </ul>

ul {
  width: 100px;
  padding: 4px;
  border: 1px solid #000;
  list-style: none;
}

li {
  display: inline-block;
  padding: 4px;
  border: 1px solid #000;
}

li + li {
  margin: 8px 0 0 8px;
}

結果は次のようになります↓

この「D」のみmargin-left: 8pxを外したいのですが、可能でしょうか？
もちろん、この場合のみに限ればli:nth-child(4)を指定すれば可能でしょうが、
リストの中身が可変だった場合に指定がずれてしまいます。

例)

つまりタイトルの通り、「回り込んだ左端要素を指定することは可能ですか？」をお伺いしたいです。

よろしくお願いします！！

Comments

[m.ts10806]

急にBが２つ出てきましたが、これはどういうことでしょうか。

[nyako_prog]

リストの中身が変更されて

<li>BB</li>

↑になったということです。
説明不足でした！すみません！

Answer 1

「回り込んだ左端要素を指定することは可能ですか？」

回り込んだ2行目の1番最初の要素を指定する方法はないです。

---

右下に余白を作るようにすると、解決できるかと思います。

ul {
  width: 100px;
  padding: 4px;
  border: 1px solid #000;
  list-style: none;
}

li {
  display: inline-block;
  padding: 4px;
  border: 1px solid #000;
}

/* 最後の要素以外のliは、右側に余白をつくる */
li:not(:last-child) {
  margin: 0 8px 8px 0;
}

同じサイズでぴったり並べたいなら、親要素にdisplay: grid;を使う方法をおすすめします。