Sass を使わずに CSS をネストさせる

2023/12/19 10:33

CSS Nesting とは

CSS で Sass や Less のような入れ子構造での記述を可能にするものです。

例えば

./foo.html

<div class="container">
  <p class="container__text">Hello</p>
</div>

このような HTML に CSS を当てる場合、

./foo.css

.container {
  padding: 16px;
}
 
.container .container__text {
  font-size: 12px;
}

これまでは親子関係にあるセレクタでも上記のように同じ階層に書いていましたが、CSS Nesting を使うと次のような記述ができるようになります。

./foo.css

.container {
  padding: 16px;
 
  .container__text {
    font-size: 12px;
  }
}

セレクタの階層構造がネストによって表現され、適切に利用することで保守性が高まります。

Sass を書いたことがあれば、基本的には同じようにネストして書くことができます。

冒頭で書いたような記法がスタンダードですが、Nesting Selector である & を Prefix として付与できます。

./foo.css

.container {
  padding: 16px;
 
  & .container__text {
    font-size: 12px;
  }
}

要素をネストする場合は & を付与したうえで選択します。

./foo.html

<main class="container">
  <h1>Hello</h1>
</main>

このような HTML に CSS を当てる場合、

./foo.css

.container {
  padding: 16px;
 
  & h1 {
    color: blue;
  }
}

このようにすることで、.container の子要素である h1 をスタイリングできます。

一部のブラウザでは CSS Nesting のサポートが進んでおり、次のように & なしで要素を選択できます。

./foo.css

.container {
  padding: 16px;
 
  h1 {
    color: blue;
  }
}

12/19 時点でサポートを開始したブラウザとバージョンは次の通りです。

./foo.html

<div class="container">
  <p class="container__text">Hello</p>
  <div>
    <p class="container__text">こんにちは</p>
  </div>
</div>

このような HTML の場合で、.container の子要素の .container__text のみ選択したい場合は次のように書くことができます。

./foo.css

.container {
  padding: 16px;
 
  > .container__text {
    font-size: 12px;
  }
}

Sass と同様に & に連結することで選択できます。

./foo.css

button {
  &:hover {
    opacity: 0.5;
  }
}

has() は本日 12/19 に Firefox 121 でサポートが開始されたことにより、すべてのモダンブラウザで利用できるようになりました。このような関数擬似クラスを利用する場合は次のように書くことができます。

./foo.css

html {
  &:has(dialog[open]) {
    overflow: hidden;
  }
}