CSS Selector "(A or B) and C"?
For those reading this >= 2021:
I found success using the :is()
selector:
*:is(.a, .b).c{...}
Not yet, but there is the experimental :is()
(formerly :matches()
) pseudo-class selector that does just that:
:is.a .b) .c {
/* stuff goes here */
}
You can find more info on it here and here. Currently, most browsers support its initial version :any()
, which works the same way, but will be replaced by :is()
. We just have to wait a little more before using this everywhere (I surely will).
is there a better syntax?
No. CSS' or
operator (,
) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c
.