1

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
Narendra Varma Pakalapati
  • 11
  • 2

3 Answers3

2

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/

kuchar
  • 607
  • 1
  • 8
  • 23
1

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.

Jesus Angulo
  • 2,646
  • 22
  • 28
  • 1
    Also, to succesfully use it in your project you should join it to your build system, for example using gulp: http://ryanchristiani.com/getting-started-with-gulp-and-sass/ – Artem Arkhipov Jun 28 '16 at 13:33
0

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

j1mm1nycr1cket
  • 33
  • 5
  • Is this an answer or a comment? – j08691 Jun 28 '16 at 13:34
  • It's an answer. Let me elaborate. You can add a class to the tag of the page you want to affect and then prefix all your rules with that body class, so they only apply to that page. Your main stylesheet might say this: div.foo { background-color: green; } ... so you would override that by adding a class of 'mynewclass' to the body of the page you're updating and then in your stylesheet, do this: body.mynewclass div.foo { background-color: red; } ...and that way, only elements with a body class of 'mynewclass' would be affected. Make sense? – j1mm1nycr1cket Jun 28 '16 at 14:09