CSSで最後の要素以外に適用させる書き方

  • このエントリーをはてなブックマークに追加

擬似要素の:not:last-childを組み合わせて指定します。

html

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

css

ul
{
    list-style-type:   none;
    text-align:        center;
}
li
{
    display:           inline;
}
li:not(:last-child):after
{
    content:           ' |';
}

:last-childで最後の要素を指定し:notで指定された要素以外を指定します。
つまり、最後の要素以外というセレクターができます。

2012-02-04 1st – jsdo.it – share JavaScript, HTML5 and CSS

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

ads

コメントを残す

*