1

Is there any way to target elements that must have class A, and can then have either class B or C or D or F...etc? Class A is required, followed by one of the others. I don't want to have to repeat almost the same code for each, as there are quite a few in my css file.

I have been playing around with attribute selectors but can't figure it out, was hoping I'm overlooking something.

Oriol
  • 274,082
  • 63
  • 437
  • 513
Frank Underwood
  • 681
  • 1
  • 8
  • 16

1 Answers1

4

The old way:

.a.b, .a.c, .a.d, .a.e, .a.f

The proposed way (that few current browsers support)

.a:matches(.b, .c, .d, .e, .f)

Some browsers implement it as

.a:moz-any(.b, .c, .d, .e, .f)
.a:webkit-any(.b, .c, .d, .e, .f)

See MDN - The :any pseudo-class

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 1
    I think Safari supports :matches(), great article on [webkit blog](https://webkit.org/blog/3615/css-selectors-inside-selectors-discover-matches-not-and-nth-child/). – Stickers Jan 12 '17 at 15:58
  • this is exactly what i am looking for, but if i have to use browser prefixes, then i am still going to have to repeat myself 3 times.... so same as just chaining them as the old way...... or? – Frank Underwood Jan 12 '17 at 16:01
  • 1
    [Caniuse](http://caniuse.com/#search=%3Amatches) results of which browsers support `:matches()` and how. – TylerH Jan 12 '17 at 16:17
  • @TylerH wow, thats no good support. I was hoping it was this one: http://caniuse.com/#feat=matchesselector – Frank Underwood Jan 12 '17 at 16:21
  • @FrankUnderwood Nope, that's for when you're interacting with the DOM, via JS or some other method, unfortunately. – TylerH Jan 12 '17 at 16:23
  • @TylerH Right, so no IE support what so ever, no prefix etc.... makes this solution unusable for me. too bad, would bee good – Frank Underwood Jan 12 '17 at 16:27
  • 2
    @Frank Underwood: Yeah pretty much. Don't bother with :any(), no matter what anyone else tells you. *They were never intended for production use.* – BoltClock Jan 12 '17 at 16:27
  • @BoltClock ok, well then its back to chaining. Will accept this answer as it is correct, just doesnt fit my code. – Frank Underwood Jan 12 '17 at 16:39