CSSの入れ子とは？書き方を初心者向けに分かりやすく解説します

こんにちは、とおるです。

CSSの入れ子って、ちょっと分かりづらいですよね。特に初心者は下記のような悩みを持っている方もいます。

こんな方は、当記事でスッキリ解決できます。

今回は初心者の方にも分かりやすく

まで、初心者にも分かりやすく解説しています。

CSSの入れ子を理解することで、より効率よく作業を進められるようになるので、ぜひ参考にしてみて下さい。

CSS入れ子は特定の要素にスタイルを当てられる

CSSの入れ子は、親要素または特定の子や孫要素（要素＝セレクタ）に対して、指定したスタイルを当てることができます。

覚えておくと作業効率がアップするので、ぜひ覚えていきましょう。

「百聞は一見にしかず」ということで、簡単な例を挙げてみます。

今回は「こんにちは！」という子セレクタ「h2」だけに対して、文字色を指定していくと下記のようになります。

See the Pen
ko-serector by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

この場合

という事になります。

親セレクタの後に「半角スペース」で子セレクタを記述することを「子孫セレクタ」と言い、セレクタ同士をつなげる部分を「結合子」と言います。

結合子でつなげると、そのセレクタに対して指定のスタイルを当てられるという訳です。どのセレクタにスタイルを当てるかによって結合子が変化するので、次から詳細に解説していきます。

CSS入れ子の書き方基本～結合子で変化する～

ここからは、下記4つのセレクタに必要な、結合子（セレクタとセレクタをつなぐ役目）と書き方を解説していきます。

子孫セレクタの場合は半角スペース

先程の例の部分でも少し解説しましたが、「子孫セレクタ」の結合子は「 (半角スペース)」です。さらに、名前の通り「子セレクタ」だけではなく「孫セレクタ」まで、指定したスタイルを当てることができます。

子セレクタのみ文字色変更する場合

See the Pen
ko-serector by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

冒頭で例に出した通り

で、子セレクタの文字色が変更できます。

孫セレクタのみ文字色変更する場合

See the Pen
mago-serector by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

こちらは

で、孫セレクタの文字色が変更できます。

直下セレクタの場合は「>」

親セレクタの直下にある、子セレクタのみにスタイルを当てる「直下セレクタ」の結合子は「>」です。子孫セレクタでは、子も孫もセレクタが同じであればスタイルは当てられますが、直下の子セレクタは孫セレクタには適応されません。

直下の子セレクタの文字色変更をする場合

See the Pen
cyokka-selector by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

こちらは、孫セレクタにも「p」はありますが

となっていることで、直下の子セレクタのみにスタイルを当てることができます。

隣接セレクタの場合は「+」

セレクタの直後（隣）にあるセレクタに対して、スタイルを当てる「隣接セレクタ」の結合子は「+」です。同じ階層にあるセレクタ同士に適応されます。

同じ階層の直後にあるセレクタの文字色変更する場合

See the Pen
rinsetu-serector by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

こちらは

となっていることで、同じ階層の直後にあるセレクタに、スタイルを当てることができます。

間接セレクタの場合は「~」

指定したセレクタ以降の、同じセレクタ全てにスタイルを与える「間接セレクタ」の結合子は「~」です。隣接セレクタ同様に、同じ階層にあるセレクタ同士に適応されます。

同じ階層にあるセレクタ以降で同じセレクタの文字色変更する場合

See the Pen
kansetu-serector by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

こちらは

となっていることで、指定したセレクタ以降の同じセレクタ全てに、スタイルを当てることができます。

以上、基本的な入れ子の結合子と書き方の解説でした。次は、上記の4つ以外にも知っておくと便利なパターンをご紹介します。

その他よく使うCSS入れ子の書き方

ご紹介してきた4つの入れ子以外にも、便利な書き方がありますので、それを2つほど解説していきます。

複数のセレクタにスタイルを当てる場合

指定したセレクタ内の子や孫に対して、同じスタイルを当てたい場合は「,」で区切ると適応されます。

複数のセレクタの文字色変更する場合

See the Pen
fukusu by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

こちらは

となっていることで、親セレクタの中の子孫セレクタに関係なく、同じスタイルを当てることができます。

 指定のn番目のセレクタにスタイルを当てる場合

複数の同じセレクタの中でも

を使用すると適応されます。

指定のn番目の文字色変更する場合

See the Pen
first-child by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

こちらは

となっていることで、複数の子セレクタの初めだけに、スタイルを当てることができます。

ちなみに、最後にスタイルを当てたい場合は、上記の「first-child」を「last-child」に変更します。

See the Pen
last-child by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

指定のn(2)番目にスタイルを当てたい場合は「nth-child(2)」に変更します。

See the Pen
nth-child(2) by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

次は、入れ子で記述してみたものの、スタイルが反映されない時の確認ポイントを解説します。

CSS入れ子が効かない時の確認ポイント

ここでは、CSSの入れ子が効かない時に、確認すべきポイントをご紹介します。

特に初心者の方は、覚えておくとスムーズに原因を発見できますので、参考にしてみて下さい。

大概の場合は、下記の原因が多いので意識して確認してみましょう。

記述間違いを疑う

効かない場合は、まずセレクタ名や結合子等の記述間違いを疑いましょう。

例えばですが、下記のようなケアレスミスが起こる可能性があります。

などなど、初心者ではなくても間違えることがあります。

「間違いなく記述してある」と思い込んでいても、間違っている可能性は十分ありえます。どうしても効かない場合は再度確認してみましょう。

CSSの優先順位を把握する

CSSでは同じセレクタに対して、複数のスタイルを記述することができます。この時の優先度は「後述したスタイル」が優先されます。

例えば下記の場合、前述した「#1a1a1a」よりも、後述した「#6fb5ff」のほうが優先順位が高いことが分かります。

See the Pen
css-rank by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

さらに以下の場合は、上から順に優先順位が高いことも把握しておきましょう。

See the Pen
css-rank2 by とおる😁＠プログラミング勉強中🚀 (@toru_fukulog)
on CodePen.

これらの優先順位もあるので、しっかりと確認するようにしましょう。

まとめ

今回は初心者の方にも、なるべく分かるようにCSSの入れ子について解説しました。

入れ子は、親要素をメインとして、子や孫要素への変更が簡単です。書き方さえ覚えてしまえば、効率よくコーディングができるようになります。

場合によっては、少し複雑な入れ子も存在しますが「親はどれで、どの子や孫に対するものか？」という部分を常に考えておくと分かりやすいです。

当記事で、CSSの入れ子について少しでも理解が深り、作業効率が上がれば幸いです。