TOP > CSS > last-child擬似クラス

last-child擬似クラス


メニューなどテキストをボーダーで区切って表示するサンプルソースを書いてみました。


表示例の画像:



<ui><li>を使ってリスト表示し、CSSで回り込みを設定し横一列に並べます。

そのうえで、右側のボーダーを有効にして区切り線に見せかけるというものです。


でも、このままでは、下記のような表示になります。




そこで、last-childの擬似クラスを使って最後要素のボーダーを消します。




[HTMLコードのソース]





[CSSコードのソース]






[表示結果]



Sponsored Link
Powered by PHPなんか怖くないぞ(>_<)