Css assign multiple style blocks for one class

Question

Can I wrap a class (or id) around styling to apply it to elements only in that class?
For example, I have :

 .title {
   color: #000;
  }
  .block {
    width: 100%;
  }
  .wrapper {
    width: 90%;
  }

I'd like to create a different design for these things, if they are in a specific class. I know You can do it like so:

.specific_class .title{
   color: #fff;
}

But then I have to add it to each block. Can I do something like this?

.specific_class{
      .title {
        color: #fff;
      }
      .block {
        width: 99%;
      }
      .wrapper {
        width: 91%;
      }
}

..just to assign different styles to work, if elements are in a specific class. (I know the last example doesn't actually work).
I have a lot of these little blocks, so one "wrapping" would work and look a lot better than copy/pasting .specific_class in front of each one.

I'd like to apologize, if such question exists. I just couldn't find the correct words and find the solution, but there probably is a question like mine.

You can use http://sass-lang.com/ or http://lesscss.org/ to do this — Wendy Adi, Oct 19 '16 at 14:23

score 1 · Accepted Answer · answered Oct 19 '16 at 14:23

1

It is not possible in regular CSS. However, you might be interested in SASS, a CSS preprocessor that allows you to write nested rules (amongst other things) and compile them down to regular CSS.

answered Oct 19 '16 at 14:23

darrylyeo

3,103
20
30

Yeah. I thought so. I just wanted an outside opinion. Hoped there is some magic trick. Crap, oh well... Thanks! – Mike B Oct 19 '16 at 14:25
1

Glad to help! Yeah, we all have those "Why in the world isn't this built in?!" moments. – darrylyeo Oct 19 '16 at 14:26

Css assign multiple style blocks for one class

1 Answers1