【初心者向け】CSSの入れ子の記述方法とルールを徹底解説

要素の中の要素というように、複数の要素を絡めてCSSを詳細に指定することを入れ子と呼びます。

本記事では、CSSの入れ子の種類やルールについてまとめました。

入れ子を理解できれば、記述量を減らすことも可能です。

初心者のうちから確実に入れ子の記述量とルールを理解しておきましょう。

入れ子とは複数の要素を使用

入れ子とは、複数の要素を使用してCSSを詳細に指定することです。

例えば、以下のようなものがあります。

CSS
div p {
color:red;
}

これはdivの中のpという指定で、divに入っていないpにはスタイルは適用されません。

このようにして、CSSを指定する要素を絞り込むことができるのです。

要素の中の要素という指定は、子孫セレクタと呼びます。

入れ子は以下の4種類です。

1つずつ解説していきます。それぞれの特徴を確実に理解しておきましょう。

子孫セレクタ

先にも触れましたが、特定の要素の中に入っている要素という指定法です。

HTML
<div><p>テキスト1</p></div>
<p>テキスト2</p>
<article><p>テキスト3</p></article>

CSS
div p {
color:red;
}

CSSは、要素と要素の間に半角スペースを入れています。

これで要素の中の要素という指定になります。

上記のCSSでは、divの中のpという指定を行いました。

テキスト1はdivの中にpが入っているので、スタイルが適用されます。

スタイル2はpのみで、外側には何もないので適用されません。

テキスト3もdivではなくarticleの中に入っているので、無効です。

このように同じpでも、指定した要素の中に入っているかいないかで、スタイルが適用されるかどうかを分けられるのです。

以下のような使い方が便利です。

CSS
main p {
font-size:16px;
}
aside p {
font-seize:14px;
}

メインのエリア（main）はテキストのサイズを16pxとし、サブのエリア（aside）はテキストのサイズを14pxとしました。

このように使用頻度の高いタグを領域ごとにCSSの指定を分けると、コーディングの効率が良くなります。

入れ子の数を増やすことも可能

要素の中の要素の中の要素というように、階層を増やして指定することも可能です。

HTML
<article><div><p>テキスト1</p></div></article>
<div><p>テキスト2</p></div>

CSS
article div p {
color:red;
}

CSSでartilceの中のdivの中のpという記述を行っています。

対象となるセレクタ＋半角スペースというのは、要素が2つのときと変わりません。

テキスト1はarticle、div、pが揃っているので適用されます。

しかし、テキスト2はdivの中にpが入っているだけで、articleが存在しないので適用されません。

このセレクタは制限なく増やすことができます。

常に対象となるセレクタ＋半角スペースを追記していくだけです。

なお、子孫セレクタではCSSの隣り合う要素同士が、HTMLで直下の関係性である必要はありません。

HTML
<article><div><p>テキスト1</p></div></article>

CSS
article p {
color:red;
}

CSSでarticleの中のpという指定を行いました。

HTMLはarticle、div、pという順番ですが、article「の中の」pという条件は満たしているので、スタイルが適用されます。

直下セレクタ

ある要素のすぐ内側にある要素にスタイルを指定できます。

HTML
<article><p>テキスト</p></article>

CSS
article > p {
color:red;
}

CSSは要素と要素の間に「>」を記述します。

これはarticleの直下のpという記述です。

ある要素の直下にある要素のことを「子要素」と呼びます。直上の要素は「親要素」です。

子孫セレクタと同じようにも思えますが、「直下」というところに大きな違いがあります。

子孫セレクタはarticleの中にあるpがあれば、その間にどんな要素が入っても適用されるという記述法です。

それに対して直下セレクタは、divの直下にあるp、つまり子要素のpでなければ適用されないのです。

HTML
<article><p>テキスト1</p></article>
<p>テキスト2</p>
<article><div><p>テキスト3</p></div></article>

CSS
article > p {
color:red;
}

テキスト1~テキスト3のうち、スタイルが適用されるのはテキスト1のみです。

テキスト2がarticleの中に入っていないので、適用されないというのは子孫セレクタと同様です。

テキスト3はarticleの中のpという子孫セレクタならば適用されますが、直下セレクタでは無効です。

articleとpの間にdivが入っているので、articleの直下のp、子要素ではないためです。

このように直下セレクタは、特定の場所にある要素にピンポイントでスタイルを適用させることができます。

隣接セレクタ

ある要素に隣接する要素に対して、スタイルを適用させる記述法です。

隣接する要素というのは、言い換えるとある要素の直後の要素ということです。

HTML
<article><p>テキスト1</p></article>
<p>テキスト2</p>

CSS
article + p {
color:red;
}

CSSは要素と要素の間に「+」を記述します。

この記述でスタイルが適用されるのはテキスト2です。

articleに隣接するpという記述なので、articleの中のpであるテキスト1には適用されません。

直後という点も重要です。

HTML
<article><p>テキスト1</p></article>
<p>テキスト2</p>
<p>テキスト3</p>

CSS
article + p {
color:red;
}

この場合、テキスト3はarticleの直後ではないので無効です。

HTML
<div>
<p class=”content”>コンテンツ</p>
<p class=”detail”>詳細</p>
</div>
<div>
<p class=”content”>コンテンツ</p>
<p class=”detail”>詳細</p>
</div>
<div>
<p class=”detail”>詳細</p>
</div>

CSS
.contents + .detail {
color:red;
}

隣に.contentsがある.detailにだけ、スタイルが適用されます。

このように条件を満たした要素にだけ、CSSを指定するということが可能です。

また、動的にHTMLを制御する際などにも使われます。

要素が出たり消えたりするときに、常に指定した要素の隣に来た要素にだけスタイルを適用させるといった手法です。

間接セレクタ

基準となる要素以降にある要素という指定法です。

HTML
<p>テキスト1</p>
<p>テキスト2</p>
<h2>テキスト3</h2>
<p>テキスト4</p>
<p>テキスト5</p>

CSS
h2 ~ p {
color:red;
}

CSSは要素と要素の間に「~」を記述します。

これで、h2以降にあるpという記述になりました。

このHTMLでスタイルが適用されるのはテキスト4とテキスト5です。

h2以降なので、h2自体は含まれません。

また、同じ階層にある要素にしか適用されないという点にも注意が必要です。

HTML
<p>テキスト1</p>
<p>テキスト2</p>
<h2>テキスト3</h2>
<p>テキスト4</p>
<div><p>テキスト5</p></div>

CSS
h2 ~ p {
color:red;
}

この記述だと、スタイルが適用されるのはテキスト4のみです。

テキスト5もpで囲われていますが、h2と同じ階層にあるのはdivなので、「以降の」という扱いにはなりません。

CSS
h2 ~ div p {
color:red;
}

このようにすれば、テキスト5にスタイルが適用されます。

この「以降の」という指定方法はうまく使えば非常に便利です。

HTML
<h2>テキスト1</h2>
<p>テキスト2</p>
<h3>テキスト3</h3>
<p>テキスト4</p>
<p>テキスト5</p>

CSS
h3 ~ p {
font-size:12px;
}

テキスト4、テキスト5のフォントサイズを12ピクセルにするという記述です。

h3以降のテキストは、h2以降のテキストよりも重要度が下がるので、目立たないようにしたいという意図です。

HTML
<article>
<h2>テキスト1</h2>
<p>テキスト2</p>
<h3>テキスト3</h3>
<p>テキスト4</p>
<p>テキスト5</p>
</article>
<article>
<h2>テキスト6</h2>
<p>テキスト7</p>
<h3>テキスト8</h3>
<p>テキスト9</p>
<p>テキスト10</p>
</article>

このように外側を囲っておけば、テキスト7は通常の大きさとなり、テキスト9、テキスト10がまた12ピクセルになります。

同じ階層のみに適用されるというのが、間接セレクタの大きなポイントです。

複数セレクタ

入れ子とは異なりますが、CSSの記述としては非常に近いものです。

一つのCSSの記述で、複数のセレクタにスタイルを適用できます。

HTML
<h2>テキスト1</h2>
<p>テキスト2</p>
<ul>
<li>テキスト3</li>
<li>テキスト4</li>
</ul>

CSS
h2 , p , li {
color:red;
}

CSSは要素と要素の間に「,」を記述します。

これで複数のセレクタに同時にスタイルを指定できるようになります。

上記の記述ではh2とp、liを指定したので、テキスト1~テキスト4まですべてにスタイルが適用されます。

これを知っていると知っていないとでは、コーディングの効率に圧倒的な差が生まれます。

まとめ

CSSの入れ子について解説してきました。

それぞれに特徴があり、上手に使いこなせば効率よくCSSを記述できるようになるでしょう。

複数セレクタとあわせて、ぜひ覚えてください。