勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

CSSで親子関連のセレクターをネスト(入れ子)で指定する方法

  CSS

CSSで親子関連のセレクターを指定する場合「.parent .child{}」のように指定していたが、ネスト(入れ子)で指定できるようになったらしい。ネストで指定する方が明らかに保守性が上がると思われるので指定方法を覚えておきたい。以下にソースコード及びサンプルをメモ。

 

リファレンス

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

 

サンプル

https://taitan916.info/sample/CSS_nesting/

 

ソースコード

<style>
.parent{
    color: #fff;
    background: #f00;
    .child{
        background: #0f0;
        .grandchild{
            background: #00f;
        }
    }
}
</style>

<div class="parent">
    親要素
    <div class="child">
        子要素
        <div class="grandchild">
            孫要素
        </div>
    </div>
</div>

 

その他

ブラウザサポート状況

こちらのページを見る限り主要ブラウザでは問題無くサポートされている模様。

ちなみに2023年12月以降に主要ブラウザで動作するようになったとのことで割と最近の話になる。

 

所感

今までセレクター指定だとCSSを追加する毎にバラバラになるというか、後から見た時に分かりづらくなりがちだった。

ネスト指定できるようになると「スライダー用のセレクタ」「記事部分のセレクタ」等、ブロックごとにまとめられるので保守性が上がると思われる。

 - CSS

  関連記事

CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法

他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...

Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法

最近サイト内のツールページ等をMaterial Design Liteで作ってい ...

Bootstrap5系でよく使う要素及びClass名のまとめ記事

サンプルページやダッシュボード系のページを組む際にBootstrapを使うことが ...

HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)

HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mp ...