CSSの入れ子ができない

Question

fieldset[name="field_pass"] input[type="text"] {
	width: 120px;
}
fieldset[name="field_pass"] b {
	margin-right: 10px;
	width:120px;
	float: left;
}

上記のようなCSSを、入れ子にできるかなあと思い、次のように書き換えました。

fieldset[name="field_pass"] {
    input[type="text"] {
        width: 120px;
    }
    b {
        margin-right: 10px;
        width:120px;
        float: left;
    }
}

これが適用できないのですが、どこが間違っているのでしょうか？
よろしくお願いします。

Answer 1

残念ながら標準仕様のCSSでは、ネストしたスタイル定義はサポートされていません。

ただし、Sass や less などの CSS プリプロセスツールを使うと、ネストしたスタイル定義だけでなく、数値設定に変数や演算式を使うなどの機能を使うことができます。

Wikipedia の Sass のページに、機能概要とネストしたスタイルの定義方法などの解説がありました。lessはこちらのページ（英語）にネストの例が載っています。

ご参考になれば。

Comments

[takey]

>残念ながら標準仕様のCSSでは、ネストしたスタイル定義はサポートされていません。
そうだったのですか。道理でできないわけですね。
ありがとうございました。

Answer 2

コードが正しいですが
１個目のスタイルはCSS、
２個目のスタイルはSCSS。

現状のブラウザーはSCSSを対応してません。
SCSSはNode.jsやRubyにしか使えません。