4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

li要素が増えた時にclassを追加せずに修正する

Posted at

htmlで下のようなマークアップをを書く時に

エビデンス

カニデンス

タコデンス

イカデンス

<ul>
<li>エビデンス</li>
<li>カニデンス</li>
<li>タコデンス</li>
<li>イカデンス</li>
</ul>

<style>
li:not(:last-child):after{
    content: "↓";
    display: block;
}
</style>

「:not(:last-child)」を挟むことで、最後の「li」要素以外に矢印が付くようになる。
こうしておけば、今後の更新例えば、「ウニデンス」や「タイデンス」などの追加があった場合でも、classの付け替えをせず、htmlに要素を追加するのみで完結できる。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?