CSS write class inside a class

Question

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.

Look into CSS preprocessors like sass and less

j08691
– j08691

2016-06-28 13:31:15 +00:00
Commented Jun 28, 2016 at 13:31 — j08691
– j08691, Commented Jun 28, 2016 at 13:31
Possible duplicate of nested css rules

sdgluck
– sdgluck

2016-06-28 13:31:49 +00:00
Commented Jun 28, 2016 at 13:31 — sdgluck
– sdgluck, Commented Jun 28, 2016 at 13:31

kuchar · Accepted Answer · 2016-06-28 13:40:02Z

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/

edited Jun 28, 2016 at 13:40

answered Jun 28, 2016 at 13:33

kuchar

6371 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jesus Angulo · Accepted Answer · 2016-06-28 13:35:27Z

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.

edited Jun 28, 2016 at 13:35

answered Jun 28, 2016 at 13:31

Jesus Angulo

2,66625 silver badges28 bronze badges

1 Comment

Artem Arkhipov Over a year ago

Also, to succesfully use it in your project you should join it to your build system, for example using gulp: ryanchristiani.com/getting-started-with-gulp-and-sass

j1mm1nycr1cket · Accepted Answer · 2016-06-28 13:32:45Z

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

answered Jun 28, 2016 at 13:32

j1mm1nycr1cket

435 bronze badges

2 Comments

j08691 Over a year ago

Is this an answer or a comment?

j1mm1nycr1cket Over a year ago

It's an answer. Let me elaborate. You can add a class to the <body> 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?

Collectives™ on Stack Overflow

CSS write class inside a class

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related