CSS ネスト

CSS ネスト　入れ子
まとめ

CSS ネスト　入れ子

CSSのネストは、CSSプリプロセッサ（Sass、Less）で一般的でしたが、最近のCSSでネイティブにサポートされるようになりました。これにより、セレクタを入れ子にして、より読みやすく、構造的なCSSを書くことができます。

  <nav>
    <ul>
        <li class="active"><a href="#">ホーム</a></li>
        <li><a href="#">コンセプト</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">お問い合わせ</a></li>
    </ul>
</nav>

nav {
  background-color: #333;
  padding: 1rem;

  ul {
    list-style-type: none;
    display: flex;
    gap: 1rem;

    li {
      a {
        color: white;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }

      &.active {
       font-weight: bold;
      }
    }
  }
}

&は親セレクタを参照します

<button class="button">クリックしてください</button>

.button {
  background-color: red;
  color: white;
  padding: 10px 20px;

  &:hover {
    background-color: darkblue;
  }

  &:active {
    transform: scale(0.98);
  }

  &::before {
    content: "→ ";
  }
}

:hover」::before :activeなどの疑似要素のネストは&をつけます。