0

Is it possible to alter X amount of elements (h1, p, span...) only if they have a specific class? I'm looking for something like this:

(elem1, elem2, elem3, elem4).class {
  /* do things here */
}

Previously I tried with parentheses, curly and square brackets, and curly seemed to work but a quick glance to Firefox's console inspector seemed to tell me it ignored eveything between the start and end of the brackets, and of course worked, but would also apply to a, say, div instead of p, span, hX.

I know that doing...

elem1.class, elem2.class, elem3.class, elem4.class {
  /* do things here */
}

would work, but I was looking for a less verbose syntax, because I'm a lazy ass.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alxe
  • 381
  • 3
  • 12
  • 2
    "it ignored eveything between the start and end of the brackets, and of course worked" If it ignored everything it couldn't have worked. – BoltClock Oct 22 '13 at 16:07
  • I don't really understand....why don't you just use `.myclass { }`? (without a tagname) – Adam Jenkins Oct 22 '13 at 16:15
  • @BoltClock: It ignored the elements and applied the css to every element that had `class` as it's class. Sorry if I didn't explain myself. – Alxe Oct 22 '13 at 16:27

3 Answers3

1

Sorry, but it's not possible with pure css.
There's just no syntax for it.

e1.class, e2.class, e3.class is as short as it gets.

Of course, there are workarounds.

There's an extension called sass
With sass you could write

e1, e2, e3 {
    &:hover {
        /* Some stuff */
    }
}

There's also any which works like
:any(e1, e2, e3).class
But it's only supported in some very recent browsers like firefox and chrome beta (I think, but I could be wrong)

Overcode
  • 4,074
  • 1
  • 21
  • 24
  • Sass is ''not an extension'' nor a web standard. It is a CSS preprocessor, with all its advantages and disadvantages (like for example, that you need extra software to render it into CSS). – Volker E. Oct 23 '13 at 02:00
1

Some new browser supports :any (-webkit-/-moz-), e.g.

:any(elem1, elem2, elem3 ...).yourclass {
   color: green;
}

A demo (tested on firefox only): http://jsbin.com/IZozOdo/1/
Futhetr information on MDN

Otherwise consider the opportunity to use a CSS preprocessor like someone else suggested before

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • 1
    There's no point in using `:-*-any()` with the prefix at this time because 1) [it just creates even *more* repetition because of prefix parsing rules](http://stackoverflow.com/questions/10753174/css3-combining-selectors-with-or-instead-of-and/10753216#10753216) 2) it's going to become `:matches()` anyway. – BoltClock Oct 22 '13 at 16:36
0

I must be misinterpreting the question, because why wouldn't you just use a class selector without a tagname like:

.myclass {
 ...
}

That selector matches:

p.myclass, span.myclass, a.myclass, etc

Just leave the tag name off of the selector.

EDIT

As pointed out to me in the comment on this answer - if you don't want to include certain tagnames, then you either a) use the verbose syntax that you don't like or b) use another class name on the elements you do want to target (http://jsfiddle.net/Mm9HX/) - it's what CSS classes are for.

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100