WP Demo

作成日 :

3-4.ネイティブ CSS ネスト（CSS Nesting）

ネイティブ CSS ネストの基本ルール

主要ブラウザが準拠している CSS ネスト（CSS Nesting Module）の主要な仕様️️︎

  1. 親セレクタの参照：&
    ネストされたブロック内で「 & 」を使用すると、その親セレクタを指す。
  2. ネストの開始条件
    ネストするセレクタの先頭は、記号（ & , . , # , : , [ など）または結合子（ > , + , ~ , * ）の必要がある。タグ名から始める場合は「&」を前に置くのが一般的。
  3. メディアクエリのネスト
    @media や@container などのアットルールを、宣言ブロックの内部に直接記述可能。
  4. Sass との違い（文字列結合の不可）
    Sass のように &-suffix と記述して .parent-suffix というクラス名を生成不可。& は独立したセレクタとして扱われる。
  5. 詳細度
    詳細度の計算ルールは不変。基本的には展開した状態と同じ詳細度。
  6. タグ名を直接記述可 – 仕様緩和
    タグ名（div や p など）を直接ネストする際に & 必須が緩和され、タグ名を直接記述することも可能。

CSS ネストの基本構文と記述例

/* CSS ネストの基本構文 */
.card {
    padding: 20px;
    background: white;

    /* 子セレクタの指定 */
    & .card-title {
        font-size: 1.5rem;
    }

    /* 擬似クラス */
    &:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* 直下の子要素（結合子） */
    > p {
        color: #666;
    }

    /* メディアクエリのネスト */
    @media (max-width: 480px) {
        padding: 10px;
    }
}
.container {
    /* 仕様緩和により & なしでも記述可能 */
    section {
        margin-bottom: 20px;

        h2 {
            color: #333;
        }
    }
}
COPY