CSSの隣接セレクタ・直下セレクタ・間接セレクタをつかこなす

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;
}
デモ

直下セレクタのサンプル

これは段落タグと同じ親要素に属する後方の要素です。

これは段落タグと同じ親要素に属する後方の要素です。

これは段落タグと同じ親要素に属する後方の要素です。

これは段落タグと同じ親要素に属する後方の要素です。

これは段落タグと同じ親要素に属する後方の要素です。

ウェブサイト制作や動画制作のご相談はお気軽に

今すぐ問い合わせる

お問い合わせ

コメントは受け付けていません。

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はご遠慮ください。