CODEWITHSUNDEEP
cssclasscss-selectorsnested
Narendra Varma Pakalapati
Narendra Varma Pakalapati

Reputation: 11

CSS write class inside a class

Is there any way where I can write css class nesting as below.

.className{

  .childclassName1{

  }
  .childclassName2{

  }
}

because I made some amount of style changes in a product but management wants those changes need to be only in one particular page for time being and later apply globally. So I cant add that page's class name to each and every selector(like: .className .childclassName1 etc..) it will consume lot of time.

Upvotes: 1

Views: 2168

Answers (3)

kuchar
kuchar

Reputation: 637

You can do this with LESS or SASS. So if you have:

<div class="container">
   <p>Text</p>
   <a href="#">Link</a>
</div>

You can write this like below:

container {
  text-align:center;
  p {
    font-size:12px;
  }
  a {
    text-decoration:none;
  }
}

http://lesscss.org/

Upvotes: 2

Jesus Angulo
Jesus Angulo

Reputation: 2666

No, this syntax is not defined in CSS, but you've probably seen in scss (SASS) or less (LESS), which are two popular CSS preprocessors. These not only add a more friendly syntax also let you define variables and make some programming processing like conditionals,etc.

http://sass-lang.com/

http://lesscss.org/

Take a look in a LESS Sample:

 @base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}

.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}

.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

CONS: You need to compile this to generate the final style sheet but it is not so complicated even when we talk about specifically about Less, it has a client compiler out of the box.

Upvotes: 1

j1mm1nycr1cket
j1mm1nycr1cket

Reputation: 43

Can't you add a class to the body of the page you want to affect and then prefix all your rules with body.mynewclass

Upvotes: 0

Related Questions