single identifier for multiple css classes

Question

I have frequent bundling together of css classes like this:

<div class="row z-depth-2 gradient-background">
... Blah
</div>

I have these three classes: row z-depth-2 gradient-background used together in more than 200 places. How can I introduce a single class for these three taken together?

I don't mind CSS or SASS. One other problem is that row and z-depth-2 are defined in materialize.css which I don't wanna touch. So I can't simply extend these classes in SASS like so:

.input-group {
    @extend .row, .z-depth-2, .gradient-background
}

So I want to be able to do something like this:

<div class="input-group">
    ... Blah
</div>

What is real target? Set styles to these three classes when they are used together? Replace them in your HTML markup by `class="input-group"`? Or...? — pavel, Dec 08 '17 at 07:42
@panther, Yes. Updated the question with the intention because it's been flagged as unclear. — nakiya, Dec 08 '17 at 07:43
why not simply use this selector `.row.z-depth-2.gradient-background` ? — Temani Afif, Dec 08 '17 at 07:45
@TemaniAfif: Sorry, I don't understand. Can you provide an answer? I'm a bit new to css. — nakiya, Dec 08 '17 at 07:49
Could you not combine all applicable style statements from those separate rules into one style block? So, take all styles from `.row`, `.z-depth-2`, and `.gradient-background` and combine them into one style rule `input-group`. — UncaughtTypeError, Dec 08 '17 at 07:52
@UncaughtTypeError: This is exactly what I want to do. But, `.row` and `.z-depth` are defined in `materialize.css` and there's no way that I'm gonna redo those stylings again. I just want a simple way to specify that wherever `input-group` is specified as class, it should expand to `row z-depth-2 .gradient-background`. That's it. — nakiya, Dec 08 '17 at 07:57
It's not really clear to me what you mean by *expand* - but the only way I can see you doing this is if you **copy** all the required style statements from the classes in question and declare them under your own custom style block; which would be `input-group` - then when using `.input-group` as a class, you'll know it is essentially a combination of all style rules from the required classes. If you are expecting something more *dynamic*, I don't think this can be done with standard CSS syntax. — UncaughtTypeError, Dec 08 '17 at 08:04
@UncaughtTypeError i think he want to have a Preprocessing script that wil change the `input-group` into these 3 classes. Of course something we cannot use with pure CSS. So he need to write one selector and at the end it's rendred as the 3 others — Temani Afif, Dec 08 '17 at 08:06
So, I take it that this is impossible to do with CSS? SASS would have worked, but I depend on the materialize classes (`.row` and `z-depth-2`). So I can't import it. Looks like there's no way around this. — nakiya, Dec 08 '17 at 08:28

Temani Afif · Answer 1 · 2017-12-08T08:08:27.183

Why not simply use the three classes as one selector like this .row.z-depth-2.gradient-background. It will allow you to select elements that have these 3 classes (it can have more of course) :

div {
  margin:10px;
  height: 20px;
  background: blue;
}

.row.z-depth-2.gradient-background {/* pay attention as there is no spaces between the classes*/
  background: red;
}

<div class="row z-depth-2 gradient-background">
<!-- Select this one -->
</div>
<div class="row gradient-background">

</div>

<div class="row z-depth-2">

</div>

<div class="row gradient-background z-depth-2 more-class">
<!-- Select this one -->
</div>

Usefull links to get more details :

https://css-tricks.com/multiple-class-id-selectors/

Using two CSS classes on one element

UPDATE

If you want to use a new class that will later be replaced with these 3 ones, you can use a small jQuery script in order to do what you need, like this :

//select all element with class input-group
$('.input-group').each(function() {
  $(this).removeClass('input-group'); //remove input-group
  $(this).addClass('row z-depth-2 gradient-background'); //add the other classes
})

div {
  margin: 10px;
  height: 20px;
  background: blue;
}

.row.z-depth-2.gradient-background {
  /* pay attention as there is no spaces between the classes*/
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">

</div>
<div class="class">

</div>

I'm afraid this doesn't do what I was hoping to do. I just want to be able to do this: `
...` and have it expand to `
...`. — nakiya, Dec 08 '17 at 07:58
To clarify, I don't want to have a "different style" for `.row.z-depth-2.gradient-background` selector. I just want to give that selector a single name. That's it. — nakiya, Dec 08 '17 at 08:01
@nakiya will a JS solution ok ? i provided one in my updated answer — Temani Afif, Dec 08 '17 at 08:03
Sorry, don't wanna do JS solution. I was under the impression that this is doable in CSS/SASS. Looks like it's impossible. Thanks for the time. — nakiya, Dec 08 '17 at 08:29

single identifier for multiple css classes

1 Answers1