Home / Questions / 391968
Accepted
Andres
Asked: 2020-09-25 07:18:55 +0800 CST 2020-09-25 07:18:55 +0800 CST

assign multiple classes to a style

  • 772

I am building a page and I am using the w3.css style sheets and it turns out that I would like to assign all the elements "a" the same 4 classes, leaving each element defined as follows:

<a class="w3-bar-item w3-button w3-border-bottom w3-border-deep-purple" style="text-align:right;">Usuario</a>

As this seems very repetitive to me, I would like to do something like:

a {
  w3-bar-item;
  w3-button;
  w3-border-bottom;
  w3-border-deep-purple;
}

But clearly this doesn't work, is there a way to do something like this or is it just fantasy?

html

1 Answers

  1. Best Answer

    One thing is the css styles and another very different the selectors (classes), the classes or selectors are used to identify an object, in this case "a", you cannot include classes and try to make them work as styles, for that you have to group the css styles that each class contains and group them into one, then assign it to the "a" object.

    .w3-bar-item {padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-button {border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.w3-border-bottom {border-bottom:1px solid #ccc!important}
.w3-border-deep-purple,.w3-hover-border-deep-purple:hover {border-color:#673ab7!important}

    Now, I think it's too much css for a simple link, apart from the fact that many styles contradict each other, I don't know if it's because of the misuse of classes by W3 or you're choosing classes on the fly, if you're going to use a framework it's recommended sticking to it, or creating styles from scratch as you wish will only end up writing too much boilerplate code that will ultimately affect your page rendering. also many classes of the frameworks are linked to others clases, pseudoelementos, hover, before,etc.

    Check the difference below in both links, one with the requested classes, and another totally custom and without the use of css.

    /* primer botón (w3.css)*/
.btn01 {
  padding:8px 16px;
  float:left;
  width:auto;
  border:none;
  display:block;
  outline:0; 
  border:none;
  display:inline-block;
  padding:8px 16px;
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  background-color:inherit;
  text-align:center;
  cursor:pointer;
  white-space:nowrap; 
  border-bottom:1px solid #ccc!important; 
  border-color:#673ab7!important
}

/* segundo botón (custom)*/
.btn02 {
  padding:8px 16px;
  display: inline-block;
  color: inherit;
  border-bottom:1px solid #673ab7;
  text-align:right;
}
    <a class="btn01" style="text-align:right;">Usuario</a>

<a class="btn02">Usuario</a></div>

    • 1