How to select multiple classes in css?

Question

Is there any shorter way to select all these things using only once the id #load ?

#load p,
#load h1,
#load h2,
#load h3,
#load h4,
#load h5,
#load h6 {
  font-size: 80%;
  margin:2%;
}

Answer 1

You can always add a class to the elements:

<h1 class="myclass"></h1>
<h2 class="myclass"></h2>
etc...

And then select them all with that class:

#load .myclass {
  font-size: 80%;
  margin:2%;
}

---

If you use SASS (or any CSS preprocessor) then it would look something like this:

#load {
  p, h1, h2, h3, h4, h5, h6 {
    font-size: 80%;
    margin: 2%;
  }
}

SASS needs to be installed on the server, which will then compile the code to pure CSS. The result will be the same thing you posted in the question.

---

Also, I'm adding this as an option,
there is the matching CSS selector:

#load :-moz-any(p, h1, h2, h3, h4, h5, h6) { /* firefox 4+*/
  font-size: 80%;
  margin:2%;
}

#load :-webkit-any(p, h1, h2, h3, h4, h5, h6) { /* chrome 15+, safari 5+, opera 15+ */
  font-size: 80%;
  margin:2%;
}

There is no support for the matching selector by IE/Edge