次のようなスタイルの要素のリストがあります。
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline;
}
li:not(:last-child):after {
content:' |';
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>出力One | Two | Three | Four | Five |の代わりにOne | Two | Three | Four | Five
最後の要素を除くすべての要素を CSS で選択する方法を知っている人はいますか?
:not()セレクタの定義を見ることができますここ
ベストアンサー1
notセレクターに問題がある場合は、すべて設定して最後のセレクターを上書きすることができます。
li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}
またはbeforeを使用できる場合はlast-childは必要ありません
li+li:before
{
content: '| ';
}