連続したDiv要素の最後だけに適用するスタイル

連続したDiv要素の最後だけに適用するスタイル

ボタンを枠線付で並べたいときにとっても便利よ。

<div id="menu">

  <div class="iphone_button">
	<a href='/signin' title="ログイン">
		<img src="/images/Contact_128.png" alt="ログイン" width=64>
	</a><br/>
	<a href='/signin' title="ログイン">
		<span class="button_caption">ログイン</span>
	</a>
  </div>
  <div class="iphone_button">
	<a href='/signup' title="ユーザー登録">
		<img src="/images/MSN_128.png" alt="ユーザー登録" width=64>
	</a><br/>
	<a href='/signup' title="ユーザー登録">
		<span class="button_caption">ユーザー登録</span>
	</a>
  </div>

</div>

このように連続するボタンがある。そんなときにDivの要素を順番で指定したい。

	div.iphone_button:last-child{
		border-right: 1px solid black;
	}
	div.iphone_button:first-child{
	
	}
	div.iphone_button{
		text-align:center;
		float:left;
		width: 150px;
		padding: 5px;
		border-left: 1px solid black;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		text-decoration: none;
		
	};

連続する要素の最後や、最初だけに適用するするタイルを使えば、メニューを作るときにキレイに枠線が引けたり、メニュの最後にだけ角丸を作ったりすることが出来る。基本ね。

CSS3では当たり前ですよね。DomノードをXpath取り出すかのようにCSS3でスタイル指定するのですが、デザイナにそこまでCSS3を要求するのは酷なので、プログラマが出来ますよ？って言ってあげないとね。