Question

This question may be foolish, though I want to know from experts in CSS. Is there a way to write CSS classes under one class.

Suppose I have a few divs under a div

<div class="parent">
     <div class="c1"></div>
     <div class="c2"></div>
     <div class="c3"></div>
</div>

Normally, we write css classes like below-

.parent { width: 100%; }
.parent .c1 { //somecode }
.parent .c2 { //somecode }
.parent .c3 { //somecode }

But, I want to know. Can we write like below-

.parent {
    width: 100%;
   .c1 {
      //somecode
   }
   .c2 {
      //somecode
   }
   .c3 {
      //somecode
   }
}

Please let me know the answer on my curiosity. Thanks you.

Answer 1

You can’t using normal css.

Maybe you are looking for less? Specifically the Nested Rules section further down the page.

This allows you to do what you are asking, along with many other useful functions, variables and mixins.

Alternatively there is the option of SASS. Which is very similar to less.