Wrapping css without bloating css file

I was wondering if something like this can be done in CSS. I want to be able to group css so that I can I don't have to write it like this.

 .wrapper .header {do: something};
 .wrapper .nav .firstMenuItem 开发者_JAVA技巧{do: something};

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

Instead, I would like to do something like this but I've never seen it being used like this

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

You can do this with LESS and SASS

However, before going too far down this road I recommend you read a little about Object Oriented CSS. (Some good tips from people who have experience with large projects)

LESS example:

#header {
  color: black;

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

SASS example:

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

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

You can't do that with pure CSS, but you can use something like:

• LESS
• SCSS

Not with CSS alone, but you can for example use LESS which provides this kind of nesting.

I'm afraid that is just not possible in classic CSS. It is against the syntax.

There to exist interpreters for alternative syntaxes, which will just turn your syntax into valid CSS either at compile-time or run-time. You could look for or write one of those.

But if you want what you write to be valid CSS, this is just not possible.