隣接セレクタ・間接セレクタ・直下セレクタ

隣接セレクタ

隣接セレクタは、隣にある要素を指定する場合に使います。要素 + 要素というように要素を"+"でつなげて表記します。指定したスタイルが適用されるのは隣にある要素になるので注意してください。

隣接セレクタは隣りにある要素ひとつだけしか指定されません。また隣りにある要素が条件にあったものではなかった場合はスタイルの適用はおこなわれません。

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li id="list3">リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
</ul>

#list3 + li{
	color: red;
}

間接セレクタ

間接セレクタは、基準要素以降で条件に合うすべての兄弟要素を指定するセレクタです。隣接セレクタは隣りにあるひとつの要素しか指定しませんが、間接セレクタは複数の要素を指定します。

基準要素以降のすべての兄弟要素で条件に合うものを選択するので例えば２つ隣りの要素が条件にあえばその要素にスタイルを適用します。

間接セレクタは要素 ~ 要素という方法で指定します。

<ul>
	<li>リスト1</li>
	<li>リスト2</li>
	<li id="list3">リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
</ul>

#list3 ~ li{
	color: red;
}

直下セレクタ

直下セレクタは、直下にある子要素で条件にあったものにスタイルを適用するセレクタです。もし直下の子要素で条件に合わない要素にはスタイルは適用されません。

下層の要素を指定する場合、ul li{}のようにスペースで区切る方法がありますが、これは下層にあるすべての要素に適用されてしまいます。なので直下にある要素だけを指定したい場合は直下セレクタを採用します。

直下セレクタは、要素 > 要素という指定方法です。

<div id="parent">
	<div>リスト1
		<div>リスト1-1</div>
		<div>リスト1-2</div>
	</div>
	<div>リスト2
		<div>リスト2-1</div>
		<div>リスト2-2</div>
	</div>
</div>	

div#parent > div{
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

div#parent > divで#parentの直下にあるdivタグに対してスタイルを適用しています。孫要素のdivタグにはボーダーがないために直下のdivタグのみにスタイルが適用されていることがわかります。

ちなみに、colorなどのスタイルは親要素から引き継がれるため、混乱しないようにご注意ください。