WebサイトのデザインはCSSとよばれる言語で表現されています。
この隣接セレクタ・直下セレクタ・間接セレクタをつかいこなすことができるようになれば、今よりももっと柔軟にCSSを扱うことができるようになります。

隣接セレクタとは

隣接セレクタは隣接兄弟セレクタとも呼ばれます。
セレクタとセレクタを結合子［+］ でつなぐことで、ある要素に隣接している後続の要素にスタイルを適用することができます。
実際にHTMLとCSSのサンプルソースを見ながら内容を解説していきます。

<p>この段落タグは見出しタグに隣接している前方の要素です。</p>
<h1>隣接セレクタのサンプル</h1>
<p>この段落タグは見出しタグに隣接している後続の要素です。</p>
<p>この段落タグは見出しタグに隣接していない後続の要素です。</p>

h1 + p {
	color: red;
}

間接セレクタとは

間接セレクタは一般兄弟セレクタとも呼ばれます。
セレクタとセレクタを［~］でつなぐことで、ある要素と同じ親要素に属する後続の要素にスタイルが適用されます。

<h1>間接セレクタのサンプル</h1>
<span>これは段落タグと同じ親要素に属する前方の要素です。</span>
<p>これは段落タグです。</p>
<span>これは段落タグと同じ親要素に属する後方の要素です。</span>
<p>
	<span>これは段落タグと同じ親要素に属する段落タグのひとつ下層の要素です。</span>
</p>
<span>これは段落タグと同じ親要素に属する後方の要素です。</span>

p ~ span {
	color: red;
}

直下セレクタとは

直下セレクタは子セレクタとも呼ばれます。
セレクタとセレクタを［>］でつなぐことで、ある要素の直下の子要素のみにスタイルが適用されます。

<h1>直下セレクタのサンプル</h1>
<div class="demo01">
	<div>
		<p>これは段落タグと同じ親要素に属する後方の要素です。</p>
	</div>
	<p>これは段落タグと同じ親要素に属する後方の要素です。</p>
	<p>これは段落タグと同じ親要素に属する後方の要素です。</p>
</div>
<div>
	<p>これは段落タグと同じ親要素に属する後方の要素です。</p>
	<p>これは段落タグと同じ親要素に属する後方の要素です。</p>
</div>

div.demo01 > span {
	color: red;
}