CSS classなどのセレクタの入れ子の書き方

classなど、CSSセレクタはたくさんありますが、中でもよく使うのが入れ子（子孫要素）へ指定するセレクタです。

CSSセレクタの入れ子の書き方をしっかりマスターし、classだらけのhtmlから脱却しましょう。

「そもそもセレクタって何？」というかたはこちらをまずごらんください。

基本の書き方

子孫要素への指定セレクタ

E F

Fが実際に指定されるセレクタです。半角スペースで仕切ります。
これはEセレクタより子孫にあるFセレクタへの指定となります。
子孫ということなので孫のその子のその孫にもかかっていきます。

例

• 子
  • 孫
    • ひ孫

html

<ul class="parent">
    <li>子
        <ul>
            <li>孫
                <ul>
                    <li>ひ孫</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.parent li{
    border: 1px solid #999;
}

.parentより子孫にあるすべてのliにborderを指定しています。

子要素へのみの指定セレクタ

E>F

Fが実際に指定されるセレクタです。「>」で仕切ります。
これはEセレクタの直下にある子要素Fセレクタへの指定となります。
孫以下にはかかりません。

• 子
  • 孫
    • ひ孫

html

<ul class="parent2">
    <li>子
        <ul>
            <li>孫
                <ul>
                    <li>ひ孫</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.parent2>li{
    border: 1px solid #999;
}

「E F」のときと違い「E>F」では孫、ひ孫にはかかっていません。

「でも1箇所にしかかからないならclassで指定しても同じだ！」と思いましたか？

次のようなときに便利です。

応用

例1.複数のセレクタを1度に指定

• 子1
  • 孫
• 子2
• 子3
• 子4
• 子5
• 子6
• 子7

html

<ul class="parent3">
    <li>子1
        <ul>
            <li>孫</li>
        </ul>
    </li>
    <li>子2</li>
    <li>子3</li>
    <li>子4</li>
    <li>子5</li>
    <li>子6</li>
    <li>子7</li>
</ul>

CSS

.parent>li{
    border: 1px solid #999;
    background: #f2f2f2
}

このように数が多くかつ共通のCSSを指定する場合は子要素セレクタなど上手に使うと楽です。

例2.共通箇所を先に指定し、異なる箇所をクラスで指定

• 子1
• 子2

html

<ul class="parent4">
    <li class="child1">子1</li>
    <li class="child2">子2</li>
</ul>

CSS

.parent4>li{
    border: 1px solid #999;
    background: #f2f2f2
}
.child1{
    color: red;
}
.child2{
    color: blue;
}

liにclass指定していますが、共通事項は子要素セレクタを使っています。
これによりあとで調整する際、一度に変更できます。

上記の場合「.parent4>li」と「.child1,.child2」はほぼ同じ意味になります。しかし今後liが増え、.child3、.child4が増えたとき、修正する箇所はできるだけ少ないほうが間違いを減らすことができます。

よって共通事項は子要素セレクタで指定することをオススメします。

例3.親要素によって子要素を指定する

• • 孫1
  • 孫2
• • 孫3
  • 孫4

html

<ul class="parent5">
    <li class="child3">
        <ul>
            <li>孫1</li>
            <li>孫2</li>
        </ul>
    </li>
    <li class="child4">
        <ul>
            <li>孫3</li>
            <li>孫4</li>
        </ul>
    </li>
</ul>

CSS

.parent5>li li{
    border: 1px solid #999;
    background: #f2f2f2
}
.child3 li{
    color: red;
}
.child4 li{
    color: blue;
}

上記のCSSはいずれも最終的には「li」に対する指定ですが、まったく同じ結果にはなっていません。

まず「.parent5>li li」で共通箇所を指定します。
「.child3 li」は親（先祖）に .child3 があるliで、
「.child4 li」は親（先祖）に .child4 があるliであるため、異なるliにCSSを指定することができます。

まとめ

「子孫要素への指定セレクタ」と「子要素へのみの指定セレクタ」の基本と応用を説明しました。
これらをうまく使うことでclassだらけのhtmlから脱却できるとともに間違いの減少、コード作成の時短にもつながってきます。

以上、CSSセレクタ 入れ子の使い方でした。