CSS をネストで記述する

CSS をネスト構造で記述する

素のCSSでようやくネストができるようになりました。まだ対応ブラウザは少ないものの（約75%）SASSを使わずに幾つかのルールはあるものの、記述ができるようになりました。

要素の中に要素、要素の中にクラスでネストで記述する場合のルール

要素の中に要素、例えば、下記のような単純な構造をネストで記述する場合ですがSCSSの場合は普通に入れ子で記述できるのですが、CSSネストで記述する場合はルールに沿って記述する必要があります。

<header>
<h1 class="title">サイトタイトル</h1>
</header>

CSSをネストで記述する場合、要素の中に要素で記述する場合、またはクラス指定されたものに対する記述の場合と書き方が変わってきます。

header {
.title{
color:red;
}
}

header {
&>h1{
color:red;
}
}

header という要素に対して子要素である、「.title」はそのままシンプルに入れ子で書くことができますが、header の中の h1 という要素に対しては「&>」と子要素という記述をする必要があります。