CSS間接セレクタ「~」と隣接兄弟セレクタ「+」の使いどころ

Internet Exolorer 6 以外で使える、CSSの隣接兄弟セレクタ、間接セレクタの使いどころを発見!
CMSで項目の組み合わせが変わる場合、2番め以降だけにセパレータ的な線やマージをつけるのに便利です。

間接セレクタをつかうと、2番め以降に登場する要素にスタイルを適用できます。

.section dl ~ dl {
	border-top: 1px dotted #666;
}

隣接兄弟セレクタをつかうと、直後にならぶ要素にスタイルを適用できます。

.section dl + div {
	margin-top: 1em;
}

くわしくは、サンプルで!

サンプル

同じパターンがいくつか続く場合は間接セレクタ、個別指定する場合は隣接兄弟セレクタで設定しました。

フルセット

項目A
Aの値
項目B
Bの値
項目C
Cの値
なにか文章なにか文章なにか文章なにか文章なにか文章なにか文章なにか文章

文章なしで項目も歯抜け

項目A
Aの値
項目C
Cの値

文章だけ

なにか文章なにか文章なにか文章なにか文章なにか文章なにか文章なにか文章

サンプルソース

<div class="section">
	<dl class="itemA">
		<dt>項目A</dt>
		<dd>Aの値</dd>
	</dl>
	<dl class="itemB">
		<dt>項目B</dt>
		<dd>Bの値</dd>
	</dl>
	<dl class="itemC">
		<dt>項目C</dt>
		<dd>Cの値</dd>
	</dl>
	<div class="paragraph">
		なにか文章なにか文章なにか文章なにか文章なにか文章なにか文章なにか文章
	</div>
</div>
.section {
	border-radius: 0.5em;
	margin: 1em;
	padding: 1em;
	background: #eee;
	border: 2px solid #666;
}
	.section dl {
		padding: 1em 0;
	}
	.section dl:after {
		content: '';
		display: block;
		clear: both;
		width: 0;
		height: 0;
	}
		.section dl dt {
			float: left;
			font-weight: bold;
			padding: 0 1em;
			width: 5em;
		}
		.section dl dd{
			padding: 0 0 0 8em;
		}
	.section dl~dl {
		border-top: 1px dotted #666;
	}
	.paragraph {
		background: #fff;
		border-radius: 0.5em;
		padding: 1em;
	}
	dl+.paragraph {
		margin-top: 1em;
	}

この間接セレクタの使いかたは、
全部に上下ボーダーをつけておいて:first-child だけ上のボーダーを取り消すやり方の
逆パターンみたいだなあ。

関連記事

Pocket