ウェブ制作

公開日：2024/12/17

当サイトのリンクには広告が含まれています。

CSSのネストの書き方：子要素以外にもこんなに幅広く使える

CSSのネストは、子要素に限らず、要素自身の擬似要素（::before / ::after）や擬似クラス（:hover）、さらにはメディアクエリまで幅広く活用できます。これらのCSSネストの書き方を、サンプルコードを交えて解説します。

CSSのネストは、「ネスト」という呼称から「入れ子」や「階層」を連想し、子要素（子孫セレクタ）の装飾に特化した記法だと思われがちですが、実際は子要素に限らず、要素自身の擬似要素（::before / ::after）や擬似クラス（:hover）、さらにはメディアクエリなど幅広く活用できます。

従来の記法

#parent #child-1 {
    ～
}

#parent .child-2 {
    ～
}

#parent.current {
    ～
}

ネスト記法

#parent {
    #child-1 {
        ～
    }

    .child-2 {
        ～
    }

    &.current {
        ～
    }
}

今回はCSSのネストの書き方を、コーディングの現場で使うであろうサンプルコードを交えて解説します。

子要素の指定

ネストの書き方(子要素)

.parent {
    #child {
        ～
    }

    .child {
        ～
    }

    & a {
        ～
    }
}

結果

.parent #child {
    ～
}

.parent .child {
    ～
}

.parent a {
    ～
}

※プレーンなHTML要素には頭に「&」セレクターを(まだ)つけた方が無難

親要素を一括で指定

ネストの書き方(親要素)

.block-a,
.block-b {
    .child {
        ～
    }
}

結果

.block-a .child {
    ～
}

.block-b .child {
    ～
}

疑似要素(::before / ::afterなど)の指定

ネストの書き方(疑似要素 ::before / ::afterなど)

.parent {
    &::before {
        ～
    }

    &::after {
        ～
    }
}

結果

.parent::before {
    ～
}

.parent::after {
    ～
}

擬似クラス(:hoverなど)の指定

ネストの書き方(擬似クラス :hoverなど)

.parent {
    &:hover {
        ～
    }

    &:hover::after {
        ～
    }
}

結果

.parent:hover {
    ～
}

.parent:hover::after {
    ～
}

特定のclass(id)の指定。疑似クラスも併せて

ネストの書き方(特定のclass)

.parent {
    &.current {
        ～
        &:hover {
            ～
        }
    }
}

結果

.parent.current {
    ～
}

.parent.current:hover {
    ～
}

メディアクエリ(@media)の指定

ネストの書き方(メディアクエリ @media)

.parent {
    @media (hover: hover) {
        &:hover {
            ～
        }
    }

    @media (max-width: 750px) {
        ～
    }
}

結果

@media (hover: hover) {
    .parent:hover {
        ～
    }
}

@media (max-width: 750px) {
    .parent {
        ～
    }
}

実際にCSSのネスト記法を詰め込んでみたデモ

例えば、ボタンのように多様なデザインパターンが想定される要素は、すべて1つのネストにまとめることができます。

以下のコードは、ボタンの装飾時にありそうなパターンを想定して組んでみた例です。

ボタン風リンクを、ネスト記法で装飾したデモ

See the Pen CSSのネスト記法の活用例 by MEMORUKA (@memoruka) on CodePen.

CSS

.buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 2em auto;

    /* - ボタン基本スタイル */
    & a {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 1.5em;
        height: 3.5em;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        padding-inline: 1.5em 1em;
        background-color: #1E99D5;
        border-radius: 100vmax;
        line-height: 1.2;

        &::after {
            content: "";
            display: block;
            width: 16px;
            aspect-ratio: 1/1;
            background: url(./img/ico_arrow.png) center center / contain no-repeat;
        }

        /* - hover時のスタイル */
        @media (hover: hover) {

            &:hover {
                opacity: .5;
            }

        }

        /* 外部リンク時のスタイル */
        &[target="_blank"] {
            background-color: #EA4844;

            &::after {
                background-image: url(./img/ico_blank.png);
            }
        }

        /* classのスタイル */
        &.is-magnifier {
            background-color: #23AC38;

            &::after {
                background-image: url(./img/ico_magnifier.png);
            }

        }
    }

    /* メディアクエリ */
    @media (max-width: 750px) {
        gap: 8px;

        & a {
            font-size: 12px;

            &::after {
                width: 12px;
            }

        }
    }
}

ネストの使いすぎに注意

CSSでネスト記法が使えるようになったからといって、何でもかんでもネストで書くのが正解かと言えば、それは人によると思います。従来の記法を使うのも、何も間違いではありません。

上記の例題コードでは、1つの親要素のネスト内にすべてのパターンを詰め込んでみました。このネストでまとめられたコードを見たとき、「親要素が見えなくなってむしろ分かりづらい」派と、「全部が一箇所にまとまって管理が楽だ」派で意見が分かれると思います。

なるべく関係性の近い、直近の親要素からネストを始めるのがコツ

自分は「全部が一箇所にまとまってラク派」なのですが、それでも視認性を考えると、ネストは2、3階層くらいが限界かなと思います。さらに複雑なデザインになると、この下にさらに子孫セレクタが続くことになり、流石にわけが分からなくなります。

こういった場合は、装飾に関係ない親要素は省略し、なるべく関係性の近い直近の要素からネストを始め、ネストが深くなりすぎないよう調整するのがコツだと思います。