how to combine multiple css class selectors into one?

Question

I have a few selector classes eg

.rt-grid-6 { ... }
.largemargintop { ... }
.rt-left { ... }

I have to use them in couple of elements in my html

sample

<div class="rt-grid-6 largemargintop rt-left">
    ...
</div>
<div class="rt-grid-6 largemargintop rt-left">
    ...
</div>
...

so this is being repeated and difficult to manage, if I have to add or remove a class then I have to update all the occurrences

so I was thinking if the below mentioned css is possible in some way

.item
{
    rt-grid-6; //refer to the mentioned class
    largemargintop;
    rt-left;
}

and I can use them as in the sample below

<div class="item">
    ...
</div>
<div class="item">
    ...
</div>
...

I can define a new .item class for the same with the values but the problem is I can not change the existing classes and at the same time I have to use the style define in the respective classes.

I can not use less as I can not redefine the style or have access to sources. I only receive a compiled css to use as is.

So is there any possible way by which I can achieve the desired?

solution may not be necessary in the way I mentioned, but I want to increase the maintenance so that it is easier to add or remove the classes to the desired elements from a single point.

You can't do inheritance like that in regular CSS. Look at Less or SASS or one of the programmatic CSS engines, in those, you can do exactly that. :) — i-CONICA, Aug 19 '14 at 10:29
You need a CSS pre-processor, like LESS: http://lesscss.org/ — emerson.marini, Aug 19 '14 at 10:31

SnakeDrak · Answer 1 · 2022-03-31T22:31:23.270

4

With only CSS is not possible. You must use a CSS compiler like SASS or LESS.

You can see a guide: http://sass-lang.com/guide

An example with SASS:

.item
{
    @extend .rt-grid-6; //refer to the mentioned class
    @extend .largemargintop;
    @extend .rt-left;
}

Very simple!

In SASS you can use variables, and much more! It's very useful.

edited Mar 31 '22 at 22:31

answered Aug 19 '14 at 10:30

SnakeDrak

3,406
4
28
41

this looks great! it seems like I need to install the software. is it possible to do it web only? – pushpraj Aug 19 '14 at 10:42
Yes. You can use http://sassmeister.com/ for example. Also you can use a `SASS` framework like [`Compass`](http://compass-style.org/), it is usefull to browsers compatibility. Some frameworks like `Symfony` has compatibility with `SASS` to compile automatically. I suggest you learn `SASS`! :). [See this example!](http://sassmeister.com/gist/db5bc47527f82f9c281d). – SnakeDrak Aug 19 '14 at 13:08

score 4 · Accepted Answer · answered Aug 19 '14 at 10:31

4

Since you cannot use less or sass, what you can do is use a temp css class name and replace it using jQuery like following code,

Html

<div class="temp-class">aaaaaaaaaaaaaa</div>
<div class="temp-class">bbbbbbbbbbb</div>

JS

$(".temp-class").attr("class", "rt-grid-6 largemargintop rt-left");

Demo

answered Aug 19 '14 at 10:31

Chamika Sandamal

23,565
5
63
86

1

This is the most feasible solution to my problem. BTW just wondering if it is possible to undo the same? Not required just for my knowledge. Anyways thanks for helping out :) – pushpraj Aug 19 '14 at 11:26
you can use `$(".temp-class").toggleClass("rt-grid-6 largemargintop rt-left");` – Chamika Sandamal Aug 19 '14 at 14:59

score 0 · Answer 3 · answered Aug 19 '14 at 10:30

0

try using SASS / LESS to overcome this. What you are using won't work

answered Aug 19 '14 at 10:30

Niranj Rajasekaran

740
9
20

how to combine multiple css class selectors into one?

3 Answers3