Nesting CSS classes

Question

Can I do something like the following?

.class1{some stuff}  .class2{class1;some more stuff} 

Answer 1

Update 1: There is a CSS3 spec for CSS level 3 nesting. It's currently a draft. https://tabatkins.github.io/specs/css-nesting/

Update 2 (2019): We now have a CSSWG draft https://drafts.csswg.org/css-nesting-1/

If approved, the syntax would look like this:

table.colortable {   & td {     text-align:center;     &.c { text-transform:uppercase }     &:first-child, &:first-child + td { border:1px solid black }   }   & th {     text-align:center;     background:black;     color:white;   } }  .foo {   color: red;   @nest & > .bar {     color: blue;   } }  .foo {   color: red;   @nest .parent & {     color: blue;   } } 

Status: The original 2015 spec proposal was not approved by the Working Group.

Answer 2

Not possible with vanilla CSS. However you can use something like:

• Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Or

• Less

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.

Example:

#header {   color: red;   a {     font-weight: bold;     text-decoration: none;   } }