How to write this 'OR' CSS selector?

Question

Here is an HTML fragment:

<div class="wrapper">
    <div class="ebook">
         <div class="page"></div>
    </div>

    <div class="book">
         <div class="page"></div>
    </div>

    <div class="document">
         <div class="page"></div>
    </div>
</div>

I want to match all divs with the page class with parents divs having ebook or book classes only. This selector can be used:

div.ebook div.page, div.book div.page

However is there a CSS engine suporting the following syntax ?

(div.ebook, div.book) div.page

or better

div.?book div.page

I'm not interested with a solution like this: div:not(.document) > div.page.

[`:matches()`](http://dev.w3.org/csswg/selectors-4/#matches), but browsers haven't implemented it yet. — Weafs.py, Dec 22 '14 at 02:05
@Stephan: No, that would be `:contains()` (or what used to be). — BoltClock, Dec 22 '14 at 02:08

score 5 · Accepted Answer · edited May 23 '17 at 12:06

The proposed syntax takes the form of a functional pseudo-class called :matches():

/* As this is a pseudo-class, you can make it a little DRYer by saying
   div:matches(.ebook, .book) div.page instead */
:matches(div.ebook, div.book) div.page

If you really want to get technical, Firefox implements it as :-moz-any():

:-moz-any(div.ebook, div.book) div.page

and Chrome implements it as :-webkit-any():

:-webkit-any(div.ebook, div.book) div.page

(and these actually came first prior to the selector being specced as :matches())

But if you're using them in CSS you will have to duplicate your rulesets because of certain CSS parsing rules, which is as good as not using them at all (in fact, worse). These selectors are meant for internal use only, not for production.

What you currently have is the only viable option for now.

If you want to cheat a little, you could use a substring attribute selector, but that assumes each of those elements will have exactly one class only, and no other class names will match by this particular substring (this is similar to the div.?book example you have, but it comes with the limitations of an attribute selector that are not present in a class selector):

div[class$="book"] div.page

Personally, I'd just stick with the verbose option because it's more robust.

score 1 · Answer 2 · edited May 23 '17 at 12:22

1

Check out this Fiddle that should do what you're looking for:

http://jsfiddle.net/Delorian/L44u0p8r/

div[class$="book"] { 
    background-color: yellow;
}

Further details: https://stackoverflow.com/a/9836182/3264286

edited May 23 '17 at 12:22

Community

1
1

answered Dec 22 '14 at 02:14

Delorian

330
1
3
13

score 0 · Answer 3 · answered Dec 22 '14 at 02:08

0

There is no such thing as an OR selector in CSS, except for as in the example you gave, where a comma (,) can be used to separate multiple selectors e.g;

div.ebook div.page,
div.book div.page{
    // CSS properties
}

answered Dec 22 '14 at 02:08

Bill

3,478
23
42

Your solution contains the code already shown by the OP in the question. Are you sure your post adds to the topic? – enhzflep Dec 22 '14 at 02:18
@enhzflep: Yes, he's saying that what the OP has is the only way. Perhaps repeating the code wasn't necessary, but still. – BoltClock Dec 22 '14 at 02:20

How to write this 'OR' CSS selector?

3 Answers3