Is there a way to make a clone in CSS?

Question

For example I have this css class:

.class{
   background:#FFF; 
   border:1px solid #ccc
}

And I have this HTML structure:

<ul class="list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

And I would like to use the .class on the list. li elements without adding the class="class" to the <li>'s or rewriting the whole class for the <li>'s.

Something like:

.list li{
   .class
} 

Is this possible somehow?

Answer 1

you know the easier way would be

.list li, .class {
      whatever css
}

Answer 2

You can let some css be applied to different css selectors with comma ,. So your example would be:

.class, .list li {
   background:#FFF; 
   border:1px solid #ccc
}

Answer 3

No, unfortunately that doesn't work. Flex has that concept with

.myClass {
  styleName: "myStyleName";
}

But CSS doesn't work that way. CSS also needs nested selectors, but I wouldn't want to hang from a rope until that happened.

Answer 4

It is not possible using plain CSS. However, CSS frameworks exist which have these functionalities.