Editing all CSS rules relative to one id

Question

I have a css and i want to put all the rules in css relative to an id.

For Example: I have

.clearfix {
    clear: both;
    display: block;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
}

And I have to make it like

#vn_space .clearfix {
    clear: both;
    display: block;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
}

Is there any simple method to put all css rules relative to one id instead of editing each rule

You can do this easily in sass or less but not in vanilla CSS — Nathaniel Flick, Jul 10 '15 at 06:59

score 0 · Answer 1 · answered Jul 10 '15 at 07:06

You can use inheritance for second rule.

E.g. clear: both in .clearfix will apply to rule #vn_space .clearfix. So in #vn_space .clearfix you can omit anything that is same in rule .clearfix.

.clearfix {
  background-color: red;
  width: 20px;
  height: 20px;
}
#vm_space {
  padding: 5px;
  background-color: green;
}
#vm_space .clearfix {
  border: 1px solid black;
}

<div class="clearfix"></div>
<div id="vm_space">
  <div class="clearfix"></div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

if you want to do this any how then you can use it like

$('div').css(["#vn_space", ".clearfix"]);

but i would not suggest it to prefer you can do this css with other way

here is ref link where i found

Is it possible to reference one CSS rule within another?

edited May 23 '17 at 12:06

Community

1
1

answered Jul 10 '15 at 07:12

Himesh Aadeshara

2,114
16
26

Editing all CSS rules relative to one id

2 Answers2