last-child擬似クラス

2013.07.18 Thursday | by こも
CSSのlast-child擬似クラスを久しぶりに使ってみました。

last-childafterがごっちゃになっていて、思うように組めるのに時間がかかったので、もう迷わないようにメモしておきます。



・やりたかったこと

メニューとなるテキストを横向きに並べ、ボーダーで区切って表示する。




こんな感じ。




・やり方

1. <ul>と<li>タグでテキストをリスト化

2. CSSで<li>にfloatを設定し、回り込みを設定

3. CSSで<li>の右側のボーダーを有効にして、区切り線のようにみせかける

4. last-childの擬似クラスを使って最後要素のボーダーを消す



こんな感じでしょうか?

ちなみに、「4.」を行わないと、こんな感じに一番右のボーダーも表示されちゃいます。



last-childって便利ですね。
リストを追加してもCSSで吸収してくれるので、コーダーは特に意識せずにすみます(^-^)


<ul>
	<li><a href="#">Top</a></li>
	<li><a href="#">Info</a></li>
	<li><a href="#">Contents</a></li>
	<li><a href="#">Link</a></li>
</ul>


	/* 回り込みの設定と右ボーダーの表示 */
	li {
		float:left;
		list-style-type: none;
		border-right:1px solid #000;
		padding:0 10px;
	}

	/* 最後の要素の設定 */
	li:last-child {
		border-style:none;
	}

	/* リンクの装飾なし */
	li a {
		text-decoration:none;
	}


ちなみに設置サンプルはこちらに置いています。


Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM