【初心者でもわかる】CSSのセレクタ3種類の書き方（隣接セレクタ・間接セレクタ・直下セレクタ）

どうも、7noteです。今回はセレクタのお話。

セレクタは、どの対象にCSSを適用させるかを指示するもの。
「セレクタって何？」という方、近日中にセレクタについての記事もかきますのでお待ちくださいませ！

『隣接セレクタ』（+）

次の兄弟要素、つまりある要素から見て同階層にある次の要素に対してCSSを適用することができます。

隣接セレクタの書き方

See the Pen
隣接セレクタ by 7note (@7note)
on CodePen.0

隣接セレクタの書き方は、【+】（プラス）を使います。
h2には「h1の次にくるh2を赤色に」という書き方をしています。
同様に、h3には「h2の次にくるh3を青色に」という書き方をしています。

※注意として隣接セレクタは名前の通り隣にいないとCSSが適用されません！
（なので、h4には緑色が反映されていません。隣接セレクタを使ってh4にCSSを当てたいなら「h1 + h4」となっているところを、「h3 + h4」と書きましょう！）

『間接セレクタ』（~）

以降の兄弟要素全て、つまりある要素から見て同階層にいるそれ以降の要素全てに対してCSSを適用することができます。

間接セレクタの書き方

See the Pen
間接セレクタ by 7note (@7note)
on CodePen.0

間接セレクタの書き方は、【~】（チルダ）を使います。
h2には「同階層にあるh1以降の全てのh2を赤色に」という書き方をしています。
h3には「同階層にあるh2以降の全てのh3を青色に」という書き方をしています。

さきほどはh4には緑色が入りませんでしたが「同階層にあるh1以降の全てのh4を青色に」という書き方になるので、h4にも緑色が適応されました。

『直下セレクタ』（>）

直属の子要素にのみ、CSSを適用することができます。

直下セレクタの書き方はこちら↓

See the Pen
直下セレクタ by 7note (@7note)
on CodePen.0

直下セレクタの書き方は、【>】（大なり）を使います。
下線は「japanとついたクラスの中にある全てのp」に対して適応されていますが、
赤色は「japanとついたクラスから見て、1つ中の階層にあるp」にだけ適応されています。

まとめ

おそまつ！