Nesting selectors - possible?

Suppose I have a div with a bunch of stuff inside:

<div id="Product">
 <ul id="List"></ul>
 开发者_开发技巧<div class="Component"></div>
 <input type=... />
 ...
</div>

Now, I want to style various things, but only when inside of the #Product div. Generally, I would do:

#Product #List {}
#Product .Component {}
#Product input {}

But, can I do something like this instead?

#Product {
    #List {}
    .Component {}
    input {}
}

---

Nesting CSS selectors is not possible with standard CSS, but there are other tools like SASS, LESS, and XCSS which allow you to write rules in the way you're describing.

These tools generally "compile" into real CSS which handles converting the nested selector syntax into real CSS rules.

---

Yes, but not in regular CSS. You can use Sass! http://sass-lang.com/

---

No, you can't nest rules in CSS yet. There are CSS preprocessors available which allow cool features like nesting, variables, etc.

Check out LESS.