CSSを詰め込むことなくCSSをラップする

Question

このようなことがCSSでできるかどうか疑問に思っていました。私はこのように書く必要がないように、CSSをグループ化できるようにしたい。

.wrapper .header {do: something}; 
.wrapper .nav .firstMenuItem {do: something}; 

[div id="wrapper"] 
    [div class="header"] 
     [div class="nav"] 
     [ul] 
      [li class="firstMenuItem">First Item</li] 
     [/ul] 
     [/div] 
    [/div] 
[/div] 

代わりに、私はこのような何かをしたいと思いますが、私はそれはあなたが純粋なCSSでそれを行うことはできませんが、あなたが何かを使用することができ、この

.wrapper 
{ 
     .header .nav {do:something;} 
     .header .nav .firstMenuItem 
     { 
     do: something; 
     } 
    } 

Answer 1

あなたは、私はあなたがObject Oriented CSSについて少しを読むことをお勧めします。この道を遠くに行く前に、しかしLESSとSASS

でこれを行うことができます。 （いくつかの大規模なプロジェクトでの経験を持っている人から良いヒント）

LESS例：

#header { 
    color: black; 

    .navigation { 
    font-size: 12px; 
    } 
    .logo { 
    width: 300px; 
    &:hover { text-decoration: none } 
    } 
} 

SASS例：

.error { 
    border: 1px #f00; 
    background: #fdd; 
} 
.error.intrusion { 
    font-size: 1.3em; 
    font-weight: bold; 
} 

.badError { 
    @extend .error; 
    border-width: 3px; 
} 

Answer 2

のように使用されて見たことがありません以下のような：

• LESS
• SCSS

Answer 3

CSSだけではありませんが、たとえば、このようなネスティングを提供するLESSを使用できます。

Answer 4

古典的なCSSではそれができないのではないかと心配です。これは構文に反する。

代替構文のためのインタープリターが存在すると、コンパイル時または実行時のどちらかで構文が有効なCSSに変わるだけです。そのうちの1つを探すか書き込むことができます。

しかし、あなたが書いたものを有効なCSSにしたい場合は、これは不可能です。