メニューをpipe「|」で区切ったとき、最後にpipeを表示させない方法How to not display pipe menu

【はじめに】

メニューをulタグとliタグでマークアップするとします。
メニュー項目をpipe「|」で区切ったときに、cssで一括指定すると最後のメニュー項目にまで
pipeがついてしまって困りました。

対象ブラウザ：実装方法はCSSの「:last-child」を使用します。
「:last-child」 はCSS 3のセレクタのため IEは適応対象外です。

last-child:afterを使用する方法

Creating Pipe-Separated Menus with Unordered Lists - exscale.seさんの方法で紹介されていた方法
last-child:afterを使用して、最後の子要素のみcontentを追加しないようにしています。

■html

[code language="html"]
<ul id="footer-navigation">
<li><a href="#">Top</a></li>
<li><a href="#">Valid XHTML</a></li>
<li><a href="#">Valid CSS</a></li>
<li><a href="#">Get Firefox</a></li>
</ul>
[/code]

■CSS

[code language="css"]
#footer-navigation {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#footer-navigation li {
display: inline;
}
#footer-navigation li:after {
content: " | ";
}
#footer-navigation li:last-child:after {
content: "";
}
[/code]

nth-last-child(1)を使用する方法

css3で追加されたnth-last-child(＊)を使用する方法です。

■html

[code language="html"]
<ul id="footer-navigation">
<li><a href="#">Top</a></li>
<li><a href="#">Valid XHTML</a></li>
<li><a href="#">Valid CSS</a></li>
<li><a href="#">Get Firefox</a></li>
</ul>
[/code]

■CSS

[code language="css"]
#footer-navigation2 {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
#footer-navigation2 li {
display: inline;
margin-right:10px;
padding-right:10px;
border-right:1px solid #666;
}
#footer-navigation2 li:nth-last-child(1) {
border-right:none;
}
[/code]

解読メモ

サンプル2のnth-last-child(1)は最後から１番目の要素にスタイルを適応させている
border-right:noneが適応され、区切り線の表示が消える。

IEに対応させる場合には

javascriptを使用します。
フッターとかの区切り『｜』のサンプル1種 - CSS HappyLife

参照URL

:first-child疑似クラス (E:first-child)｜セレクタ｜CSS HappyLife ZERO

【終わりに】

CSS3についての情報が１年前よりも格段に増えてきて、参考になるサイトが増えています。
スマートフォンはCSS3がメインになるようだし、これを気に１から覚えないとダメですね。