Multi Class in Html

Question

I have a button with the following set of w3.css classes:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<button class="w3-btn w3-lime w3-hover-green  w3-round-large w3-border w3-border-green w3-ripple">Button</button>

This will be a common theme throughout my website. Instead of writing this list of all these classes on each and every button, how can I get this group of classes into a single class mybuttonclass like:

<button class="mybuttonclass">Button</button>

I guess there is no automatic way to do this, you will need to recreate the class yourself copy/paste from the others ... if you are using a tool like stylus or sass will be more easier — DaniP, Sep 09 '16 at 14:20
Or use JS to insert the classname string on all buttons .... the ugly option maybe — DaniP, Sep 09 '16 at 14:22

score 6 · Answer 1 · answered Sep 09 '16 at 14:22

Are you familiar with CSS pre-compilers such as LESS? You could make a class of classes. Which would look like:

.mybuttonclass {
  .w3-btn;
  .w3-lime;
  .w3-hover-green;
  .w3-round-large;
  .w3-border;
  .w3-border-green;
  .w3-ripple;
}

Otherwise, you would have to manually copy all of the CSS properties into one class.

score 2 · Accepted Answer · answered Sep 09 '16 at 14:33

2

May be you can add a little bit of jquery, which might be a solution:

if ($('button').hasClass('mybuttonclass')) {
    $('button').removeClass('mybuttonclass'); //optional according to your theme requirements
    $('button').addClass('w3-btn w3-lime w3-hover-green  w3-round-large w3-border w3-border-green w3-ripple');
}

answered Sep 09 '16 at 14:33

GORILLA

90
1
5

I think this is the nicest solution. – Rewind Sep 09 '16 at 15:53

score 1 · Answer 3 · answered Sep 09 '16 at 14:19

1

If these classes are common, can you not copy/merge them into a specific class?

I tend to keep a common button class (normally called 'btn') and an individual class, ending up with...

 <button class="btn my_other_class">Button</button>

answered Sep 09 '16 at 14:19

Chris J

1,441
9
19

score 1 · Answer 4 · answered Sep 09 '16 at 14:46

Inheritance isn't supported by css id/class.

.mybuttonclass,
.class1 {
    property1: value1;
}

.mybuttonclass,
.class2 {
    property2: value2;
}

.mybuttonclass,
.class3 {
    property3: value3;
}

Or you have to use "Sass" or "Less" for example.

Sass:

.mybuttonclass {
  @extend .class1;
  @extend .class2;
  @extend .class3;
}

score 0 · Answer 5 · answered Sep 09 '16 at 14:20

You need to copy all the properties of all those classes into a single one. A manual job I'm afraid :) You can use the developer tools in your browser to see those and copy them out.

.class1 {
    property1: value1;
}

.class2 {
    property2: value2;
}

.class3 {
    property3: value3;
}

.mybuttonclass {
    property1: value1;
    property2: value2;
    property3: value3;
}

Multi Class in Html

5 Answers5