【CSS】隣接セレクタ間接セレクタ直下セレクタの使い方

みなさんこんな風に思ったことはないでしょうか。

このような悩みはセレクタが解決してくれます。

CSSには、隣接セレクタ、間接セレクタ、直下セレクタというものがあり、

これらを使うことで上述のような自由度の高いスタイルを当てることが可能になります。

セレクタとは？

そもそもセレクタは、

結合子というものを利用して、ある要素の隣や、子要素などを指定するためのものです。

「+」「~」「>」などといった記号がそれに当たります。

なお、英語ではなぜかSelectorなどではなく、「Combinator」として認知されているので、

英語で検索したい場合は「Adjacent combinator(隣接セレクタ)」などと検索すると、

結果が出てきやすでしょう。

前置きはこれくらいにして、以下から各セレクタの紹介をしていきます。

隣接セレクタ（Adjacent combinator）

ある要素の隣(後続)の要素に対してスタイルを適用します。

サンプルはこちら↓

See the Pen adjacent-combinator by yukiwebcreate (@Yukiwebcreate) on CodePen.

ある要素の隣接した要素の背景色を黄色に変えています。

間接セレクタ（General-sibling-combinator）

ある要素の同じ階層の要素(兄弟要素)に対してスタイルを適用します。

必ずしも隣接している必要はありません。（隣接セレクタと違うところ）

サンプルはこちら↓

See the Pen general-sibling-combinator by yukiwebcreate (@Yukiwebcreate) on CodePen.

「あなた」と書いている要素(li01)の

兄弟要素である要素(li03)のcolorをredに変更しています。

直下セレクタ（Child combinator）

ある要素の直下の要素に対してスタイルを適用します。

サンプルはこちら↓

See the Pen child-combinator by yukiwebcreate (@Yukiwebcreate) on CodePen.

親要素のoutsideをhoverしたときに、

その子要素であるinsideの背景色が変わるように指定しています。

わかりやすい表

各セレクタの意味は結構忘れがちです。

一覧にしたので、表で視覚的に覚えてしまうのもアリでしょう。

	隣接セレクタ	間接セレクタ	直下セレクタ
セレクタ	A + B	A ~ B	A > B
階層	同一階層	同一階層	下の階層
対象要素	隣のみ	何個でも	直下のみ

注意する点

セレクタには注意点があります。

セレクタは、「子要素からみた親要素」には指定できません。

例えば「ある子要素をhoverした時に、親要素の幅が変わるようにしよう」

とかは出来ないわけです。親子関係で影響を与えることができるのは、

必ず親から子への一方通行です。

いくら方法を探しても子→親への方法だけはないので、そこは諦めてクラスを作りましょう。