noramemo

どうも！今日は早く寝たいnoramasaです！
数日前にとあるウェブサイトのコーディングをしていたところ、
リストや表にborderスタイルを指定し、最後の項目だけborderを失くしたい場面に遭遇しました。
目立たないように誤魔化して済ませることも多かったのですが、今回はそうもいかず…
ということで発見したのが「隣接セレクタ」という擬似要素！
今回は隣接セレクタを使ってリストや表の最後の項目からborderを消す方法をメモっておきます。

● ＋（隣接セレクタ）の記述例

以下のように記述すると、「h1に隣接するpがフォントサイズ150%」ということになります。

h1+p{
	font-size: 150%;
}

・・・ほにょほにょ・・・

<h1>元気100倍アンパンマン！</h1>
<p>アンパンマンはなにでできているのだろうか。</p>	//こっち側だけスタイルが適応されるよ！
<p>じゃぁカレーパンマンは…</p>

そして、リストのようにliが何個も並んでいるときは、下記の記述で2つ目以降のliにスタイルを指定できます。

li+li{
	font-size: 150%;
}

・・・ほにょほにょ・・・

<ul>
	<li>元気100倍アンパンマン！</li>
	<li>アンパンマンはなにでできているのだろうか。</li>	//↓2つ目以降にスタイルが適応されるよ！
	<li>じゃぁカレーパンマンは…</li>
<ul>

●実装方法

「last-child」を使うことでそんな隣接セレクタなんて必要ない！
…でもIEは9からしか対応していません。さすがにIE8までも無視するわけにはいかないのでございます(´･_･`)

まぁそんな難しい考え方ではないので早速表バージョンで見てみましょう！
今回は「表の枠はグレー線、中の区切り線がth下は白線でtd下はグレー線」みたいな場合の例。
HTMLへの記述例はこんな感じ。
tdやthといったものは特殊な書き方になっていてtd+tdといった書き方ではダメみたい…
「trが連続している時のth（td）にだけ線を付ける」という考え方で、下記のように記述することで2つ目以降のtdとthタグにスタイルが指定されます。
※全体はDEMOをご確認ください。

・・・ほにょほにょ・・・

<style>
table{
	width: 100%;
	margin-bottom: 10px;
	border: 2px solid #DCDCDC;
}
table th,
table td{
	padding: 5px;
}
table th{
	background-color: #D2EEF4;
}
table tr+tr th{
	border-top: 2px solid #FFFFFF;
}
table tr+tr td{
	border-top: 2px solid #DCDCDC;
}
</style>

・・・ほにょほにょ・・・

<table cellpadding="0" cellspacing="0">
<tr>
	<th>アンパンマン</th>
	<td>アンパンと流れ星で完成</td>
</tr>
<tr>
	<th>カレーパンマン</th>
	<td>やられ役</td>
</tr>
<tr>
	<th>しょくぱんまん</th>
	<td>トースター山出身<br />超能力が使える</td>
</tr>
</table>

・・・ほにょほにょ・・・

●まとめ

まずは…『なんかタイトルでは線を消すって書いてるのにある意味消してないじゃん』という指摘を受けそうで怖いです。
ごめんなさい、ちょっと自分のメモと思って雑すぎました(´･_･`)

今までは最後の項目だけ、最後用にclassを使ってたりしました。
知らないだけで本当は対応策が出てたりするもんですね！これからもいっぱい吸収せねば(｀・ω・´)
「last-child」はIE9以降ですが、こちらはIE7以降で対応しているようですので、
もう少しIE系のブラウザがCSS3などの要素に対応できるようになっていくまでは出番がありそうですね！

>>>デモ版はこちらからご確認ください。